如何在移动浏览器上监听输入事件？答案

【问题标题】：How do I listen for input events on mobile browsers?如何在移动浏览器上监听输入事件？
【发布时间】：2025-11-21 18:00:02
【问题描述】：

我编写了一个愚蠢的小“网络应用程序”，它由一个简单的文本框组成，用于处理文本并显示输出。在桌面上按我的预期工作，但在移动设备（iOS 上的 Chrome 和 Safari）上不行。我只是在输入中添加一个事件侦听器，但处理程序似乎没有被解雇。我检查了 caniuse 并且它似乎兼容，并且没有发现任何关于此的问题，所以我希望这是我在我的代码中忽略的东西。

代码 sn-p：

const input = document.querySelector('#input'); // Yes, that's the input ID.
input.addEventListener('change', clapBack);

链接到完整文件：

https://github.com/martellaj/clap-back-generator/blob/master/js/main.js

【问题讨论】：

clapback 有什么作用？
我发布了一个完整文件的链接，但它只是获取输入的值，对其进行标记，将其与表情符号连接，然后将其设置为输入下方段落元素的值.我认为没什么特别的，但我想调试的一个好方法是创建一个更简单的函数。
这对我来说似乎在一个简单的fiddle 中按预期工作。你能提供一个坏掉的小提琴/页面吗？ - 并且移动设备支持输入事件...至少您似乎正在使用的基本支持。
这里是网站：martellaj.github.io/clap-back-generator/。就像我说的，在桌面上为我工作，而不是在移动设备上。 ://

标签： javascript html

【解决方案1】：

移动设备不支持输入事件

https://developer.mozilla.org/en-US/docs/Web/Events/input

【讨论】：

【解决方案2】：

正如@jam mok 所说，移动设备不支持输入。为什么不直接使用更改事件？

const input = document.querySelector('#input'); // Yes, that's the input ID.
input.addEventListener('change', clapBack);

【讨论】：

这是我最初添加的，但它对我不起作用。我将尝试将它与更简单的处理函数结合使用，看看它现在是否有效。
好吧，输入和更改的行为略有不同。在此处查看此答案*.com/a/17047607/4992551
我了解他们的行为方式有何不同，但仍然没有在移动设备上看到任何火灾。 ://

【解决方案3】：

对于所有仍在寻找答案的人：onkeyup() 可以解决问题。

所以上述代码的解决方案可能如下所示：

const input = document.querySelector('#input'); // Yes, that's the input ID.
input.addEventListener('keyup', clapBack);

当然也可以内联使用：<input name="inputText" onkeyup="clapBack()">

【讨论】：

【解决方案4】：

2019 年更新：input 和 change 已被大多数流行的移动浏览器支持：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event

以下允许您检测移动浏览器上的更改：

const input = document.querySelector('#input'); // Yes, that's the input ID.
input.addEventListener('change', clapBack);

这是一个例子： https://codepen.io/anon/pen/LwVoWa

【讨论】：