Question

看看这个非常简单的jsfiddle： https://jsfiddle.net/gq9jga4q/33/

<input type="text" id="kbdhook" />

<div id="result" >1: </div>

<div id="result2" >2: </div>

<div id="result3" >3: </div>

$('#kbdhook').keyup(function(event) {
      var current = $('#kbdhook').val();
      if (current !== '' && current !== '\n') {
        var c, l;
        for (l = 0; l < current.length; l++) {
          c = current[l];
          $("#result").html($("#result").html() + c);
        }

        $("#result2").html($("#result2").html() + " " + $('#kbdhook').val());
        $('#kbdhook').val('');
        $("#result3").html($("#result3").html() + " " + $('#kbdhook').val());
      }
  });

我的目标是能够为输入元素中输入的每个键调用一个函数。

我正在订阅keyup事件，并且对于其中的每个字母，我将它们附加到文档中，然后清除文本输入以便下次重新重新启动。

#result div是要发送到外部库的有用输出。

＃result2 用于表示有时当您输入快速时，会在一个键盘事件中注册多个字母（没关系）。

＃result3 用于表示清除输入后确实已清除。

这适用于桌面（IE / Chrome / Firefox）和iPhone（Safari / Chrome）以及Android（Firefox）。但 Chrome on Android 会产生不同的行为。

每次触发keyup事件时，$('#kbdhook').val()的结果都是值，就好像“清除”$('#kbdhook').val('');不会发生一样。但确实如此，因为＃result3 始终是空白的。

为什么不同浏览器之间的行为存在差异，以及如何解决我的问题？

Answer 1

我最后在this thread与我的混合使用了Glauber Borges。当它是特殊代码（箭头键，删除，退格键，返回）时，我必须在他的keydown处理程序中使用event.preventdefault()，否则当插入符号不在最后时，它会将其结果搞砸。

这适用于Android Chrome，但Android Firefox现在是获得重复文字的人。就像我之前做的那样，我在.val('');处理程序中添加文本差异后添加了对input的调用以清除它现在似乎适用于每个平台。

谷歌真的应该为文本输入事件创建更好的标准，浏览器（和229键码）之间缺乏常见的行为是非常糟糕的。

仅限Android Chrome：在keyup期间更改输入值不适用

1 个答案: