iOS 7 Safari：当点击/关注HTMLinput时，OSlocking4秒钟
更新：这个问题似乎源于在页面上有许多select元素。 那是多么的随意？
所以这是问题。 在iOS 7 Safari上，点击我网站上的文本input时，键盘会打开，然后冻结操作系统大约2-5秒钟，然后滚动到input。 发生这种情况一次后，直到刷新页面才再次发生。 我已经找遍了所有的地方，是的，iOS 7的Safari是超级越野车，但让我们试试看，如果我们能弄清楚这一点。
注意：这不会发生在其他任何移动浏览器或任何以前的iOS Safari。 它发生在iOS 7和iPhone 7的iPad上。
我将列出我的朋友和我迄今尝试过的一切：
- 删除了在jQuery中添加事件处理程序的function。 （注意：除了卸载和onpageshow，我们所有的事件处理程序都是通过jQuery分配的）。
- 从input中删除了jQuery自动完成脚本。
- 从input中删除了所有JavaScript。
- 通过拒绝Mac上的域，删除了页面上添加的所有第三方库。
- 切换回以前的jQuery版本。 在没有任何工作之前，我们可以使用的最后一个是1.7.0。
- 切换回以前的jQuery UI版本。
- 将input事件处理更改为委托和实况，而不是（单击）
- 删除了所有的CSS类。
- 从页面中删除了所有的CSS。 注意：操作系统的响应时间下降到1-2秒，但仍然发生。
有没有人有任何想法？
谢谢一堆！
（有一些有效的解决scheme，请参阅列表的末尾）
在我的公司，我们也遭受了这个苦难。 我们向苹果提出了一个问题，但听到妈妈。
这里有一些有趣的jsfiddles来帮助说明一些问题，它似乎绝对围绕隐藏字段的数量，并且textareas似乎不受影响。
从debugging的努力，我的猜测是，有一些function试图检测input是否是信用卡或电话号码或某种似乎导致locking行为的特殊types。 尽pipe这只是一个假设..
概要：
在标有“display：none”的容器内的一个包含名为input元素的表单的页面上，首先按下这个表单的input，在键盘出现和input被聚焦之间有一个非常明显的延迟（20sec-2min） 。 这可以防止用户使用我们的networking应用程序，因为用户花费了大量的时间等待键盘响应。 我们已经在各种情况下对其进行了debugging，试图识别正在发生的事情，这似乎是iOS7parsingDOM的方式与iOS6上的方式的变化，而iOS6没有这些问题。
通过在Safari Inspector中debuggingiPad与iPad连接，我们发现iOS7提供了更多关于（程序）活动的信息，以至于我们发现_CollectFormMetaData是问题的母体。 search元数据会导致大量的stream失，并伴随着包含input的隐藏容器数量的增加。 我们发现_isVisible和_isRenderedFormElement被称为远远超过他们应该合理。 此外，如果有帮助，我们发现一些与信用卡和地址簿有关的检测function是大量的时间消费者。
这里是一些jsFildles的插图。 请在运行iOS6的iPad上在Safari上查看，然后在运行iOS7的iPad上查看：
http://jsfiddle.net/gUDvL/20/ – 在两者上运行都很好
http://jsfiddle.net/gUDvL/21/ – 在iOS 7上明显的延迟
http://jsfiddle.net/gUDvL/22/ – 在iOS 7上更明显的延迟
http://jsfiddle.net/gUDvL/29/ – 在iOS 7上非常明显的延迟
http://jsfiddle.net/gUDvL/30/ – 与29相同，但没有隐藏 – 在iOS 7上没有任何延迟
http://jsfiddle.net/gUDvL/38/ – 与29相同，但进一步恶化
http://jsfiddle.net/gUDvL/39/ – 99个隐藏的input，一个可见，一个单独可见
http://jsfiddle.net/gUDvL/40/ – 隐藏的textareas，一个可见的，一个单独可见
http://jsfiddle.net/gUDvL/41/ – 99隐藏的input，一个可见，一个单独可见，所有的autocomplete =“off”属性
http://jsfiddle.net/gUDvL/42/ – 99个隐藏的input，一个可见，一个单独可见。 由绝对位置隐藏，而不是显示。
http://jsfiddle.net/gUDvL/63/ – 与gUDvL / 43 /相同，但自动完成，自动更正，autocapitalize和拼写检查closures
http://jsfiddle.net/gUDvL/65/ – 与gUDvL / 63 /相同，但清理缩进（在iPad上似乎较慢）
http://jsfiddle.net/gUDvL/66/ – 与gUDvL / 65 /相同，但显示没有通过css而不是DOMReady jQuery
http://jsfiddle.net/gUDvL/67/ – 与gUDvL / 66 /相同，但使用TedGrav的焦点/模糊技术
http://jsfiddle.net/gUDvL/68/ – 与gUDvL / 66 /相同，但是用css驱动的文本缩进而不是显示：块再次（明显的改进 – 缩小到2-3秒的初始焦点）
http://jsfiddle.net/gUDvL/69/ – 与gUDvL / 68 /相同，但TedGrav的焦点/模糊重新添加
http://jsfiddle.net/gUDvL/71/ – 与gUDvL / 66 /相同，但js在每个input之前添加一个图例标签。 （明显改善 – 初始焦点减less到2-3秒）
<input type="text" autocomplete="off" /> (links to jsfiddle.net must be accompanied by code..) （我们应该注意到，使用Safari的debugging器将iPad连接到Mac，戏剧性地强调了延迟。）
重现步骤：
- 在iPad上加载上述任何jsfiddles
- 按一个input来获得焦点
- 看屏幕，直到你可以键入
预期成绩：
预计能够在popup键盘时立即键入
实际结果：
观看键盘popup，屏幕冻结，无法滚动或与Safari浏览器进行一段时间的交互。 在持续时间之后，焦点按预期给出。 从那时起，在注意力投入的时候就不会有进一步的冻结。
tl;博士技术总结
总的来说，有几个来自各种答案的build议修复：
- 不要使用display：none来隐藏div – 使用类似于text-indent的东西
- 苹果公司的元数据扫描逻辑短路 – 许多表单标签或图例标签似乎是伎俩
- 自动对焦/模糊 – 没有为我工作，但有两个人报告它做到了
苹果相关的线程：
IOS如何处理input和textareas的触摸事件似乎有问题。 当DOM变大时延迟变大。 然而，焦点事件没有问题！
要解决此问题，您可以覆盖touchend事件并将焦点设置为input / textarea。
document.addEventListener("touchend", function (e) { if (e.target.nodeName.toString().toUpperCase() == 'INPUT' || e.target.nodeName.toString().toUpperCase() == 'TEXTAREA') { e.preventDefault(); e.target.focus(); } });
这会造成一个新的问题。 它会让你滚动页面，而触摸input/ textarea，但当你放手，网站将滚动回原来的位置。
为了解决这个问题，你只需要检查是否有滚动发生，并用if语句包围preventDefault和target.focus 。
要设置原始位置，您可以使用touchstart事件。
document.addEventListener("touchstart", function (e) { ... //store the scrollTop or offsetHeight position and compare it in touchend event. }
编辑我和一个同事已经改进了一点点，它的作品就像一个魅力。
var scroll = 0; document.addEventListener("touchstart", function (e) { scroll = document.body.scrollTop; }); document.addEventListener("touchend", function (e) { if (scroll == document.body.scrollTop) { var node = e.target.nodeName.toString().toUpperCase(); if (node == 'INPUT' || node == 'TEXTAREA' || node == 'SELECT') { e.preventDefault(); e.target.focus(); if(node != 'SELECT') { var textLength = e.target.value.length; e.target.setSelectionRange(textLength, textLength); } } } });
我有相同的freezeing问题。
我不确定我们处于相同的情况。
这里是我的演示： http : //tedzhou.github.io/demo/ios7sucks.html
在我的页面中，我使用了带有onclick属性的<p>元素作为button 。 当用户点击button ，页面切换到一个textarea 。 然后点击它将冻结浏览器。
冻结的时间花在了dom元素的数量上。 在我的页面中，有10000个元素，使它冻结了10多秒。
我们可以通过将<p>元素切换到真正的<button>来解决问题，或者减lessdom元素的数量。
ps：对不起我的英文不好。 大声笑
在这个问题中，也是在插入/删除包含单个input元素的页面的ios全屏幕中挣扎着。 在页面上（以及整个DOM内）只有一个可见的文本input元素时，延迟时间长达30秒。 其他dynamic插入的页面，在同一个webapp中有单个或多个文本input，没有遇到input延迟。 像其他人所提到的那样，在最初的延迟之后，input字段在后续焦点事件上将正常运行（即使包含input元素的dynamic页面已经从DOM中移除，然后被dynamic地重新渲染/插回到DOM中）。
基于上述行为的预感，在页面加载时尝试了以下内容：
$（ “＃问题input”）专注（）; $（ “＃问题input”）模糊（）;
虽然以上立即执行，但最终的结果是当input通过用户交互获得焦点时没有后续的延迟。 无法解释这个工作背后的原因，但似乎一贯为我的应用程序工作，而其他build议的修复失败。
我的主要问题是隐藏的领域。 使forms挂起10-15秒。
我设法摆脱屏幕隐藏的表单域。
隐藏：
position: absolute; left: -9999px;
以显示：
position: relative; left: 0;
在具有许多input的相当复杂的应用程序中遇到相同的问
通过USB连接debugging器到Safari iOS7，并logging用户界面事件。 当我点击textarea（或任何input）时，我会看到“touchend”事件，在10-20秒之后，我看到“click”被调度。
很明显，这是一个在萨法里像其他设备，如Android或iOS6的错误，没有问题，同一个应用程序。
它不仅发生在iOS中，而且发生在Mac OS（Maverics）的Safari 7中，我发现问题发生在使用大量div标签在表单中包含input（或select）时：
<div> <select>...</select> </div> <div> <select>...</select> </div> ...
我改变了我的select布局，使用ul / li和fieldsets而不是div，并且freezze时间大大减less了。
<ul> <li><select>...</select></div> <li><select>...</select></div> </ul>
以下是jsfiddle中的两个示例：
冻结5秒钟
冻结1秒
我希望它可以帮助别人
对我来说，这个问题是由用户input隐藏在页面上display:none 。
我使用的解决方法：我display:none使用display:none隐藏input，而是使用了jQuery的detach()方法来准备隐藏所有未被使用的用户input。 然后在需要时append()input。
这样没有inputdisplay:none在第一次加载页面，所以没有延迟发生在初始用户交互。
我们公司有相同或相似的问题。 每当我们显示大量的下拉列表，然后用户点击一个下拉列表，IOS 7会冻结一两分钟的页面。 解冻之后，从这一点开始，一切都会正常工作。
这影响了所有的inputtypes。 大量的下拉菜单实际上隐藏在第一次加载 – 用户将启动显示的下拉菜单。 直到显示下拉菜单 – 一切都会正常工作。 一旦显示出来，下一个input点击，即使是正常工作的input，现在也会导致浏览器冻结。
正如其他人已经注意到的，似乎IOS 7在用户首次与input交互之后parsingDOM中的可见input时存在问题。 当元素/选项/ DOM的数量和/或复杂度更高时，冻结更加明显。
由于在初始的用户交互中它总是被冻结，所以我们决定在显示下拉列表后立即启动隐藏的用户操作。 我们创build了一个透明的button（它不能被隐藏 – 它必须被“显示”），并在用户打开下拉列表时立即点击它。 我们认为这会使IOS更快地parsingDOM，但是发现它实际上完全解决了这个问题。
我也遇到过这个问题，因为我注意到很多人仍然有这个问题，我想我会把我的解决scheme。
基本上我的解决scheme是服务器端的元素隐藏。 我的网页是ASP.NET，所以我用面板的input包裹我的div，并将这些面板设置为可见虚假。 这样，如果我点击一个inputSafari浏览器不能看到所有其他控件，因为他们是隐藏的服务器端。
当然，如果你想使这个工作有点像客户端jQuery你需要自动回发和更新面板的地方。 这个解决scheme需要努力，但仍然比实际尝试修复Safari浏览器更好。
希望这可以帮助。
我的答案可能略微偏离了主题，但是我在经过一些search之后确实到了这里，因为情况“感觉”类似。
问题：
我的问题感觉像是在iOSlocking，但不完全，因为页面上的其他元素仍然是互动的。 我有一个<input type="search" />元素，当我点击这个字段的时候，这个元素不会被聚焦。 但在屏幕上大约4-5次点击之后，它最终会得到关注。
附加信息：
我的项目是一个混合的应用程序：iOS应用程序内的WebView。 该网站是用Twitter Bootstrap构build的。
解：
我恰好也在元素上设置了autofocus属性。 我试图删除它，它的工作…没有更多的连续水龙头让领域的重点。
您是否尝试将“密码和自动填充”>“信用卡”closures到Safari设置？ 这个操作后，它工作正常。 这不是最终的解决scheme，但也许是iOS上的问题的原因。
