使用javascript在Android虚拟键盘上键入捕获键

Question

我有一个带有textarea的网页,我需要捕获用户键入的键(这样我就可以用键入的键替换不同的unicode字符).我目前的代码如下:

$("#myTextArea").bind('keypress', function(event) {

    var keyInput = event.which;
   // call other functions

});

以上代码适用于PC和iPhone/Safari.但是,在Android(三星)平板电脑上使用Chrome时失败了.出于某种原因,当我在android虚拟(软)键盘上键入时,不会触发"按键"事件.Android版本是5.0.2.

如果我尝试使用"keyUp"或"keyDown",它总是为所有字符返回229(返回键,空格,退格键等除外).

即使keyCode始终为229,textarea也会显示用户键入的正确字符.这意味着设备知道输入了哪个密钥,但不知怎的,我无法使用javascript来处理此事件(和密钥代码).

以下是我迄今为止尝试过的替代方案及其结果:

$("#mainTextArea").on("keydown keyup", function(event) { 
    // event.which and event.keyCode both return 229

$(document).on('keypress', function(event) { 
    // function is not triggered

$('#myTextArea').bind('input keypress', function(event) { 
   // comes inside function, but keyCode and which are undefined

有关此问题的任何帮助表示赞赏..

Answer 1

不幸的是,你似乎在这里做不了多少.Keypress事件已弃用,因此不会被触发.229 on keyup和keydown表示键盘缓冲区正忙.原因 - 当您按下某个键时 - 输入仍不能保证是用户按下的内容,因为自动建议和其他事件可能会立即跟随并使事件无效.虽然在我看来,首先发送密钥会更好,然后在自动建议中触发另一个事件,这样你就可以单独采取行动......

我目前唯一知道的是连接到keydown和keyup,将值存储在keydown上,获取keyup上的值并找到delta,这是用户按下的.不幸的是,这对于非输入控件(例如 - 身体或类似的东西)不起作用.也许不是你想听到的答案,但仍然.

Answer 2

我遇到了同样的问题.有几种解释,但无论如何似乎很奇怪,没有提供解决方案.目前我通过捕获oninput事件解决了它.

"此事件类似于onchange事件.不同之处在于oninput事件在元素值发生更改后立即发生,而onchange发生在元素失去焦点后,内容发生更改后"

此事件也支持插入文本,粘贴文本或更正和建议.

它没有给我完美的解决方案,因为我只能在输入后操作文本,但目前它是我所拥有的最好的.

如果有人有更好的解决方案,我会很高兴听到它.

Answer 3

我在为我正在从事的项目做研究时遇到了这个讨论。我必须为移动应用程序创建输入掩码，Pavel Donchev 的回答让我思考什么可以在 Android 中捕获键。在我的特定项目中，keydown 和 keyup 是不够的，因为 keyup 事件仅在释放键后才触发，因此这意味着后期验证，所以我对输入事件进行了更多研究（以及大量试验和错误）并让它工作。

var input = document.getElementById('credit-card-mask'),
    oldValue,
    newValue,
    difference = function(value1, value2) {
      var output = [];
      for(i = 0; i < value2.length; i++) {
        if(value1[i] !== value2[i]) {
          output.push(value2[i]);
        }
      }
      return output.join("");
    },
    keyDownHandler = function(e) {
      oldValue = input.value;
      document.getElementById("onkeydown-result").innerHTML = input.value;
    },
    inputHandler = function(e) {
      newValue = input.value;
      document.getElementById("oninput-result").innerHTML = input.value;
      document.getElementById("typedvalue-result").innerHTML = difference(oldValue, newValue);
    }
;

input.addEventListener('keydown', keyDownHandler);
input.addEventListener('input', inputHandler);

<input type="text" id="credit-card-mask" />
<div id="result">
  <h4>on keydown value</h4>
  <div id="onkeydown-result"></div>
  <h4>on input value</h4>
  <div id="oninput-result"></div>
  <h4>typed value</h4>
  <div id="typedvalue-result"></div>
</div>

oninput 事件在 keydown 事件之后立即触发，这是我验证的最佳时机。

我在一篇文章中整理了整件事。如果您好奇，可以在这里阅读。