移动Safari自动对焦文本字段
在移动Safari中，我无法在设置延迟时间后将焦点放在文本字段上。 我附上了一些展示该问题的示例代码。 如果点击button，则触发.focus（），一切按预期工作。 如果将焦点挂在callback函数上（如setTimeout函数），则只会在移动Safari中失败。 在所有其他浏览器中，有一个延迟，然后焦点发生。
令人困惑的是，即使在移动的Safari浏览器中也会触发“焦点”事件。 这（和〜类似的意见在SO）让我觉得这是一个移动Safari浏览器的错误。 任何指导将被接受。
我已经在模拟器和iPhone 3GS / 4 iOS4上进行了testing。
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问题：
- 编程-select文本function于一个input场-上-IOS的设备的移动safari
- 如何灿你-自动对焦-ON-A型场function于iphonesafari
- 在设置文本框焦点在移动Safari的评论
我认为这是移动Safari的一个function，而不是一个错误。 在我们关于FastClick的工作中，我和我的同事们发现，如果调用堆栈中的第一个函数是由非编程事件触发的，iOS将只允许在函数内的其他元素上触发焦点。 在你的情况下，调用setTimeout启动一个新的调用堆栈，并且安全机制将会启动，以防止您将注意力集中在input上。
请记住，在iOS设置焦点在一个input元素带来了键盘 – 所以那些所有那些页面上的重点放在一个input元素的网页，像谷歌那样，将是非常讨厌使用iOS。 我想苹果决定他们必须做些什么来防止这种情况。 所以我不同意@DA：这是一个function不是一个错误。
没有已知的解决方法，所以你不得不放弃使用延迟的想法。
2012年8月更新：
从iOS 5开始，允许通过合成的点击事件触发的处理程序触发input元素的焦点。 尝试更新的FastClickinput焦点示例 。
只有当原始事件来自用户交互时，才能通过分派点击事件来提高键盘，而不是来自setTimeout。 我相信结果是，你可以从touchend事件中提高键盘，但不是从超时。
看来focus（）只能工作，如果你已经把这个网站添加到主屏幕并且用这个链接打开了这个网站。
添加到马特答案。 至less在iOS 5.1的Safari上，这个问题是固定的。 您的FastClick工作，即综合点击事件不会失败焦点。 然而，这并不能帮助那些希望自己的单一focus()代码在所有iOS版本上工作的人感叹。
我有能力通过将它附加到事件地图中的两个单独的事件来使.focus（）工作，但它是一种黑客行为。
添加FastClick.js后，这是iOS中发生的情况：.focus（）只有在附加到事件的函数激活时才起作用。 但焦点也是移动Safari浏览器事件地图中的一个事件，当您使用jQuery的.focus（）时，实际上会调用它。 所以你可以是多余的，并在对象的焦点事件上附加另一个.focus（）来确定它是否通过。 当你在DOM中创build一个input时，这个效果特别好。 我最近喜欢编程MeteorJS，这就是解决scheme的样子：
Template.templateName.events({ "click button":function(){ Session.set("makeButtonVisible",true); $("input.created").focus(); }, "focus input.created":function(){ $("input.created").focus(); } });
希望这对外面的人有用，花了我两个小时来弄清楚这个问题。
编辑：嗯，尤其是MeteorJS，您不能使用Template.templateName.rendered函数，因为必须从事件调用.focus（）。 但是由于某种原因，当你通过jQuery添加一个input时，你可以在事件内部关注它。 猜猜这是要走的路。 这就是我最终做的事情：
Template.templateName.events({ "click button":function(){ $("body").append("<input class='created' type='tel'>"); $("input.created").focus(); } });
你自己回答。 如果你使用Jquery，你只需要触发。 更改焦点（）触发（“焦点”）; 在你的代码的任何部分。
$（ “＃searchField”）触发（ “焦点”）。
