移动Safari自动对焦文本字段 [英] Mobile Safari Autofocus text field
问题描述
如果点击按钮，触发.focus（），一切都按预期工作。如果将焦点挂在回调函数上（如setTimeout函数），则只会在移动Safari中失败。在所有其他浏览器中，有一个延迟，然后焦点发生。
令人困惑的是，即使在移动Safari浏览器中也会触发focusin事件。这（和〜类似的意见在SO）让我觉得这是一个移动Safari浏览器的错误。任何指导都将被接受。
我已经在模拟器和iPhone 3GS / 4 iOS4上测试过。
<例如HTML：
<！DOCTYPE html>
< html lang ='en'>
< head>
< title>自动对焦测试< / title>
< / head>
< body>
< h1>
显示没有用户焦点的键盘并选择文本：
< p>
< button id ='focus-test-button'>
当您点击我之后，应重点关注输入.5秒
< / 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（）{
// ***如果立即触发 - 功能按预期发生
// input.focus（）;
// ***如果通过回调调用 - 触发focusin事件，但不会显示键盘或游标
var t = setTimeout（input.focus（）;，500）;
}）;
//]]>
< / script>
< / body>
< / html>
〜Similar〜SO问题：
是移动Safari的一个功能，而不是一个错误。在我们的 FastClick ，我和我的同事发现，如果调用堆栈中的第一个函数是由非编程事件触发的，那么iOS将只允许在函数内的其他元素上触发焦点。在你的情况下，对 setTimeout 的调用会启动一个新的调用堆栈，并且安全机制会启动，以防止您将注意力集中在输入上。
请记住，在iOS上，将焦点放在一个输入元素上会出现键盘 - 所有那些在页面加载时将焦点放在输入元素上的网页，就像Google所做的那样，会非常烦人在iOS上使用。我想苹果决定他们必须做些什么来防止这种情况。所以我不同意@DA：这是一个功能，而不是一个bug。
没有已知的解决方法，所以你必须抛弃使用延迟。
2012年8月更新： 允许合成的点击事件触发输入元素的焦点。尝试更新的 FastClick输入焦点示例。 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: ~Similar~ SO questions:
<!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>
I think this is a feature of mobile Safari rather than a bug. In our work on FastClick, my colleagues and I found that iOS will only allow focus to be triggered on other elements, from within a function, if the first function in the call stack was triggered by a non-programmatic event. In your case, the call to setTimeout starts a new call stack, and the security mechanism kicks in to prevent you from setting focus on the input.
Remember that on iOS setting focus on an input element brings up the keyboard - so all those web pages out there that set focus on an input element on page load, like Google does, would be extremely annoying to use on iOS. I guess Apple decided they had to do something to prevent this. So I disagree with @DA: this is a feature not a bug.
There's no known workaround for this, so you'll have to ditch the idea of using a delay.
Update August 2012:
As of iOS 5, handlers triggered by synthesised click events are allowed to trigger focus on input elements. Try the updated FastClick input focus example.
这篇关于移动Safari自动对焦文本字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
