Question

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

代码段：

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

Answer 1

移动

不支持输入事件

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

Answer 2

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

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

Answer 3

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

因此上述代码的解决方案可能如下：

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

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

Answer 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

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

4 个答案: