I am trying to figure out whether an effect seen in Mobile Safari, Android Browser, and Firefox for Android (“Fennec”) is a bug or expected behavior. Basically, the issue is that an <input> element can receive the keyboard focus in certain scenarios even if the <input> element was not originally tapped by the user.
Here is a reproducible test case:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, user-scalable=no">
<style>
#screenCover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.3);
z-index: 1;
}
#newItemInput {
position: absolute;
width: 200px;
height: 20px;
}
</style>
</head>
<body>
<div id="screenCover"></div>
<input id="newItemInput" type="text">
<script type="text/javascript" language="JavaScript">
var screenCoverEl = document.getElementById("screenCover"),
newItemInputEl = document.getElementById("newItemInput");
newItemInputEl.value = String(navigator.userAgent);
screenCoverEl.addEventListener("touchend", function (event) {
// Move the <input> element in the way.
newItemInputEl.style.top = (event.changedTouches[0].clientY - 10) + "px";
newItemInputEl.style.left = (event.changedTouches[0].clientX - 10) + "px";
// Hide the screen cover. Note that the screen cover was the original target of the tap.
screenCoverEl.style.display = "none";
}, false);
newItemInputEl.addEventListener("click", function (event) {
this.setSelectionRange(0, this.value.length);
}, false);
</script>
</body>
</html>
Or directly in a mobile browser:
http://fiddle.jshell.net/f7TKc/2/show/
In this example, a screen cover lies on top of the document, but on touchend, the screen cover is hidden and the <input> element is moved to where the user tapped the screen cover. In Mobile Safari, Android Browser, and Fennec 13.0b1, the <input> element inexplicably receives keyboard focus.
I am not able to test this in a newer version of Fennec because it crashes within the emulator.
Is this a bug or expected behavior?
Yes I think this is a bug and this might be on the same lines here :
http://code.google.com/p/android/issues/detail?id=6721 and if its so, then the link has a few workarounds others have tried out which you can try