单击两次后无法在 iOS 上输入 html 输入字段

Posted 2023-03-14

【中文标题】单击两次后无法在 iOS 上输入 html 输入字段

【英文标题】：Can't type into html input fields on iOS after clicking twice

【发布时间】：2012-10-29 15:10:04

【问题描述】：

我在 ios 上遇到了一个问题，我已经解决了这个问题：

http://jsfiddle.net/Hk56Q/

如果为任何触摸事件（touchstart/touchmove/touchend）在文档中添加了事件监听器，如下所示：

function onTouch( e );
document.addEventListener( 'touchstart', onTouch, false );

这导致输入字段在 iOS 上具有以下行为：

第一次触摸：输入获得焦点，用户可以正确输入 随后的触摸（焦点在已经存在的字段上）：打字不再起作用

我正在 iOS 5、5.1 和 6 以及 iPad 和 iPhone（模拟器和实际设备）上遇到并测试此问题。

唯一的解决方法似乎是删除事件侦听器以恢复输入字段的正确行为（或者实际上根本不添加侦听器）：

document.removeEventListener( 'touchstart', onTouch);

我还注意到，如果页面上有多个 iframe，其中一个将侦听器添加到其文档中，它也会破坏另一个 iframe 的输入字段。

小提琴在我的 android 手机上运行正常。

任何想法为什么会发生这种情况？或者如何在不破坏 iOS 输入的情况下为触摸事件设置全局自定义事件处理程序？

【问题讨论】：

我们在使用 FastClick 时遇到了这个问题，它是 tracked publicly。我还根据您的测试用例向 Apple 提交了bug report。

嘿，是的，这绝对是一个 Safari iOS 错误，报告得很好。我仍然想知道这个问题怎么这么久都没有被注意到..

我在通过放大/缩小调整 iframe 窗口大小时也遇到了这个错误。

我相信这些问题的根源是相同的，即第一个触摸屏没有手势，当它们可用时，它们覆盖了现有界面，几乎不可能实现自定义手势。两种解决方案是使用手势事件，或者阻止它们并在需要时从头开始重新实现。

看起来很有趣。我现在正在寻找解决此问题的方法。

【参考方案1】：

这里有一个解决方法。设置焦点到窗口，然后回到节点，超时：

function fixIpadTouch(node)
    node.ontouchend=function(e)
        if(document.activeElement===node)
            window.focus();
            setTimeout(function()
                node.focus();
            ,0);
        
    

【讨论】：

我不敢相信这没有更多的赞成票。解决这个问题的唯一有效解决方案。你是一个救生员:-)

对不起，我是新人，这个功能怎么用，你能帮我详细介绍一下吗？非常感谢！

【参考方案2】：

在我的情况下，特里的答案变体解决了这个 Mobile Safari 错误 (!!!)。在这里，'#input' 和这段代码在 iframe 页面上：

var el = $('#input');
el.on('keydown', function() 
  window.focus()
  el.focus()
);

错误以多种方式触发，但“keydown”可靠地通过。这也使得下一个“按键”到达。

【参考方案3】：

jQuery Mobile 1.2.0 应该是你所需要的

证明！勾选前：

勾选后：