移动Safari自动对焦文本字段
移动Safari自动对焦文本字段
在Mobile Safari中，在设置延迟时间后，我无法将注意力集中在文本字段上。我附上一些展示问题的示例代码。如果单击该按钮，则触发.focus（），一切都按预期工作。如果你把焦点放在回调上，比如setTimeout函数，那么它只能在移动safari中失败。在所有其他浏览器中，有一个延迟，然后焦点发生。
令人困惑的是，即使在移动游猎中，也会触发“focusin”事件。这个（和SO中的〜类似〜评论）让我觉得它是一个移动的safari bug。任何指导都将被接受。
我已经在模拟器和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>
暮色呼如浏览 399回答 3
3回答
-
跃然一笑
我认为这是移动Safari的一个功能，而不是一个bug。在我们关于FastClick的工作中，我和我的同事发现，如果调用堆栈中的第一个函数是由非程序化事件触发的，iOS将只允许在函数内的其他元素上触发焦点。在您的情况下，调用setTimeout启动一个新的调用堆栈，安全机制启动，以防止您将焦点设置在输入上。请记住，在iOS设置上，关注输入元素会调出键盘 - 因此所有那些专注于页面加载的输入元素的网页，就像Google一样，在iOS上使用会非常烦人。我猜Apple决定他们必须采取措施来防止这种情况发生。所以我不同意@DA：这是一个功能，而不是一个bug。对此没有已知的解决方法，所以你必须放弃使用延迟的想法。从iOS 5开始，允许由合成点击事件触发的处理程序触发对输入元素的关注。尝试更新的FastClick输入焦点示例。 -
慕哥6287543
只有当原始事件来自用户交互而不是来自setTimeout时，才能通过调度click事件来提升键盘。我相信结果是你可以从touchend事件中提升键盘，但仍然不会超时。 -
SMILET
至少在iOS 5.1上的Safari上，此问题已修复。您的FastClick作品，即合成点击事件不会失败焦点。然而，这并不能帮助那些希望他们的单个focus()代码能够在所有iOS版本上工作的人，感叹。
随时随地看视频慕课网APP
相关分类
JavaScript