iPad Safari中的文本输入元素是否不支持触摸事件？

Question

在iPad Safari中，我已经编写了一个DIV的触摸事件，这样当你在DIV内部触摸并将手指放在那里500毫秒时，DIV的背景颜色会改变。

当我尝试将代码移动到文本输入元素（位于fieldset内部）上，使其成为触摸目标而不是DIV时，代码无法正常工作。尽管使用了以下CSS，文本输入仍然被选中：

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

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

我正在遵循文档Handling Events。

- Tim

Answer 1

如果您可以发布代码会更有帮助，但我认为您可能只需要防止触摸事件的默认行为。如果使用jQuery，则类似于以下内容：

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

- Jarrett Widman

Answer 2

尝试禁用并将输入设置为只读状态：

<input type="text" readonly />

- Yoann

Answer 3

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

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

注意：您还将失去输入字段的默认行为！换句话说，您将无法将文本输入到字段中！或者如果输入字段是<select>，则无法拉出列表等。

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

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

- Stephen Chung

---

谢谢回复。是的，我需要输入接受像普通文本输入一样的输入方式。我想在输入框上创建一个上下文菜单，以显示虚拟键盘自带上下文菜单中找不到的字符，例如当您长按 [a] 时，会弹出一个窗口显示字母 [a] 的变体形式——带重音的 a、带分音符的 a 等等。我需要给用户提供一种输入字母 [d] 和 [t] 的变体形式的方法，这些变体形式苹果的虚拟键盘中没有包含。但用户并不总是需要这样做——只有在适用的情况下才需要。 - Tim

@Tim，在这种情况下，你需要在touchstart、touchmove和touchend上进行陷阱（即执行preventDefault和stopPropagation）。然后你决定它是否是一个点击（即touchstart的起点靠近touchend）。如果是点击，则计时（即touchend - touchstart的时间）。如果时间很短，请将事件重新作为普通onclick向DOM上传。如果时间很长，请执行你的特殊操作。 - Stephen Chung

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