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

Question

我写了一个愚蠢的小“网络应用程序”，它由一个简单的文本框组成，该文本框可以操作文本并显示 output。在桌面上按我预期的方式工作，但在移动设备上却不行（Chrome 和 Safari 在 iOS 上）。 我只是将事件侦听器添加到输入，但处理程序似乎没有被触发。 我检查了 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/zh-CN/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

Answer 5

而不是使用事件。 键或事件。 keypress (keyup, keydown) 事件的代码属性，我使用过event 。 输入类型，事件。 更新事件的数据，并向输入标签添加了一些限制属性，以克服移动键盘应用程序的“智能”。 这是一个丑陋的 hack，但对我的目的有用。

HTML：

<input type="text" id="inpt" autocapitalize="none" autocomplete="off" autocorrect="off" spellcheck="false" />

记者：

var inpt = document.getElementById('inpt');
inpt.addEventListener('input', do_on_input);

function do_on_input(e) {
  
  if( e.inputType == "insertText"){
    console.log( e.data );
  }
  
  if( e.inputType == "deleteContentBackward"){
    console.log('Backspace');     
  }
  
  if( e.inputType == "insertCompositionText"){
    // without restrictive attribbutes you will need to deal with this type events
  }
  
}