触摸事件是不是不适用于 iPad Safari 中的文本输入元素？

Posted 2023-04-18

【中文标题】触摸事件是不是不适用于 iPad Safari 中的文本输入元素？

【英文标题】：Do touch events not work with text-input elements in iPad Safari?触摸事件是否不适用于 iPad Safari 中的文本输入元素？

【发布时间】：2011-03-19 07:31:58

【问题描述】：

在 iPad Safari 中，我对 DIV 的触摸事件进行了编程，这样当您触摸 DIV 内部并将手指放在该处 500 毫秒时，DIV 的背景颜色会发生变化。

当我尝试将代码移动到文本输入元素（在字段集中），使其成为触摸目标而不是 DIV 时，代码不起作用。尽管有这个 CSS，文本输入仍然被选中：

    input[type=text] -webkit-touch-callout:none; -webkit-user-select:none 

有没有办法拦截 iPad Safari 中文本输入元素的触摸事件并以自定义方式处理它们，防止默认行为？还是我必须做一些额外的事情来获得支持这一点的输入？我尝试过使用和不使用虚拟点击处理程序：onclick="void(0)"。

这是我正在关注文档的文档 Handling Events。

【参考方案1】：

如果您发布代码会很有帮助，但我认为您可能只需要阻止触摸事件的默认行为。如果使用 jQuery，这看起来像这样：

$("#ID")
        .bind("touchstart",
            function (e) 
                e.preventDefault();
                //do something
            )
        .bind("touchmove",
            function (e) 
                if (e.preventDefault)  
                    e.preventDefault();
                
                //do something
            );

【参考方案2】：

如果您不在处理程序代码中调用preventDefault()，浏览器将自动将触摸事件传递给默认实现（在您认为您已经处理它之后）。默认实现是选择字段。

因此，在您的情况下，请在处理程序中调用 preventDefault() 和 stopPropagation()，并返回 false。这可以防止事件进一步冒泡。然后你就可以完全控制你的输入元素了。

警告：您也会失去输入字段的默认行为！换句话说，您将无法在该字段中输入文本！或者如果输入字段是<select>，您将无法拉出列表等。

我想你真正想要的是：1）如果用户按住 500 毫秒，然后变成黄色，2）和/或释放时激活输入字段。在这种情况下，当您真正想要使用输入字段时，您必须手动向上重新触发事件。

这种情况在 iPad 编程时很常见。例如，在许多情况下，您希望检测触摸拖动动作（即使在输入字段上）并将其解释为移动，但将触摸释放动作（不移动）解释为单击以激活输入字段.您必须按照我上面的建议进行操作：preventDefault() 并在必要时重新触发事件。

【讨论】：

感谢您的回复。是的，我需要输入来像普通文本输入一样接受输入。我想在输入上创建一个上下文菜单以显示在虚拟键盘自己的内置上下文菜单上找不到的字符，即当你按住手指一会儿时，例如，[a] 你会得到一个弹出窗口显示字母 [a] 的变体形式——重音 a、变音字母 a 等键盘。但用户并不总是需要这样做——只有在适用时才需要这样做。

@Tim，在这种情况下，您需要在 touchstart、touchmove 和 touchend 上捕获（即进行 preventDefault 和 stopPropagation）。然后你决定它是否是点击（即 touchstart 上的 origin 接近 touchend）。如果是一次点击，则为它计时（即 touchend - touchstart 的时间）。如果时间很短，将事件作为正常的 onclick 向上重新触发到 DOM。如果时间很长，做你特别的事情。

再次感谢。我需要保留选择信息（即 selectionStart 和 selectionEnd），以便从附加到 textinput 的上下文菜单中选择的字符可以插入到正确的位置。用户正在键入需要在虚拟键盘上找不到的特殊字符的单词，并且可能试图插入字符而不是附加字符，或者用字符替换选定的文本。

【参考方案3】：

尝试禁用并将您的输入设为只读：

<input type="text" readonly />