javascript - 仅限 Android Chrome : Changing input val during keyup doesn't apply

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 用于显示有时当您快速键入时，多个字母会在单个 keyup 事件中注册(没关系)。

#result3用于说明清空输入后确实清空了。

这在桌面 (IE/Chrome/Firefox) 和 iPhone (Safari/Chrome) 以及 Android (Firefox) 上完美运行。但是 Android 上的 Chrome 给出了不同的行为。

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

为什么不同浏览器之间的行为会有如此大的差异，我该如何解决我的问题？

Answer 1

我最终在 this thread 上得到了 Glauber Borges 的混合答案和我的。当它是特殊代码(箭头键、删除、退格、返回)时，我必须在他的 keydown 处理程序中使用 event.preventdefault() 否则当插入符号不在末尾时它会搞砸他的结果。

这对 Android Chrome 来说工作得很好，但是现在 Android Firefox 却出现了重复的文本。因此，就像我之前所做的一样，我还添加了对 .val(''); 的调用，以便在 input 处理程序中附加文本差异后进行清除，它似乎可以正常工作现在在每个平台上。

Google 确实应该为文本输入事件创建一个更好的标准，这种浏览器(和 229 键码)之间缺乏共同行为的情况很糟糕。