107
rated 0 times
[
110]
[
3]
/ answers: 1 / hits: 89863
/ 13 Years ago, thu, june 9, 2011, 12:00:00
In Mobile Safari I am unable to focus onto a text field after setting a delay period. I'm attaching some example code showcasing the issue.
If, onclick of the button, you trigger .focus(), everything works as expected. If you hang the focus on a callback, like the setTimeout function, then it fails ONLY in mobile safari. In all other browsers, there is a delay, then the focus occurs.
Confusingly, the focusin event is triggered, even in mobile safari. This (and ~similar~ comments in SO) make me think that it's a mobile safari bug. Any guidance will be accepted.
I've tested in the emulator, and on iPhone 3GS/4 iOS4.
Example HTML:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Autofocus tests</title>
<meta content='width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0' name='viewport'>
<meta content='yes' name='apple-mobile-web-app-capable'>
</head>
<body>
<h1>
Show keyboard without user focus and select text:
</h1>
<p>
<button id='focus-test-button'>
Should focus on input when you click me after .5 second
</button>
<input id='focus-test-input' type='number' value='20'>
</p>
<script type=text/javascript>
//<![CDATA[
var button = document.getElementById('focus-test-button');
var input = document.getElementById('focus-test-input');
input.addEventListener('focusin', function(event) {
console.log('focus');
console.log(event);
});
button.addEventListener('click', function() {
// *** If triggered immediately - functionality occurs as expected
// input.focus();
// *** If called by callback - triggers the focusin event, but does not bring up keyboard or cursor
var t = setTimeout(input.focus();,500);
});
//]]>
</script>
</body>
</html>
~Similar~ SO questions:
- programmatically-selecting-text-in-an-input-field-on-ios-devices-mobile-safari
- how-can-you-autofocus-on-a-form-field-in-iphone-safari
- Comment in set-textbox-focus-in-mobile-safari
More From » focus
