在 Mobile Safari 中，设置延迟时间后我无法将注意力集中在文本字段上。我附上了一些示例代码来展示这个问题。 如果在单击按钮时触发 .focus()，一切都会按预期进行。如果您将焦点放在回调上，例如 setTimeout 函数，那么它只会在移动 safari 中失败。在所有其他浏览器中，有一个延迟，然后焦点出现。
令人困惑的是，“focusin”事件被触发，即使在移动版 safari 中也是如此。这(以及 SO 中的 ~similar~ 评论)让我认为这是一个移动 safari 错误。任何指导都将被接受。
我已经在模拟器和 iPhone 3GS/4 iOS4 上测试过。
示例 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>
~类似~SO问题:
最佳答案
我认为这是移动版 Safari 的一项功能，而不是错误。在我们关于 FastClick 的工作中，我和我的同事发现，如果调用堆栈中的第一个函数是由非编程事件触发的，iOS 将只允许从一个函数内的其他元素触发焦点。在您的情况下，对 setTimeout 的调用会启动一个新的调用堆栈，并且安全机制会启动以防止您将焦点设置在输入上。
请记住，在 iOS 上将焦点设置在输入元素上会调出键盘 - 因此所有那些在页面加载时将焦点设置在输入元素上的网页(如 Google 所做的那样)在 iOS 上使用起来会非常烦人。我猜苹果公司决定他们必须做点什么来防止这种情况发生。所以我不同意@DA:这是一个功能而不是错误。
没有已知的解决方法，因此您必须放弃使用延迟的想法。
2012 年 8 月更新:
从 iOS 5 开始，允许由合成点击事件触发的处理程序触发输入元素上的焦点。尝试更新的 FastClick input focus example .
关于javascript - Mobile Safari 自动对焦文本字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6287478/