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

IT技术 javascript android jquery samsung-mobile
2021-02-11 09:59:57

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

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

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

});

上面的代码适用于 PC 和 iPhone/Safari。但是,在 android(三星)平板电脑上使用 Chrome 时失败出于某种原因,当我在android 虚拟(软)键盘上键入时,不会触发“keypress”事件安卓版本是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

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

6个回答

不幸的是,您似乎在这里无能为力。Keypress 事件已被弃用,因此不会被触发。keyup 和 keydown 上的 229 表示键盘缓冲区繁忙。原因 - 当你按下一个键 - 输入仍然不能保证是用户按下的,因为自动建议和其他可能会立即跟随并使事件无效的事件。尽管在我看来最好先发送密钥,然后再在自动建议上触发另一个事件,这样您就可以单独对其采取行动...

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

oninput 确实有效,但它没有相同的功能。至少在我的情况下,很难用 oninput 代替 keypress 。
2021-03-25 09:59:57
不幸的是。我不确定这个问题有更好的解决方案。
2021-03-25 09:59:57
@PavelDonchev 请看我的回答
2021-04-13 09:59:57

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

“这个事件类似于onchange事件。不同之处在于oninput事件在元素值改变后立即发生,而onchange在元素失去焦点、内容改变后发生”

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

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

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

我在为我正在从事的项目做研究时遇到了这个讨论。我必须为移动应用程序创建输入掩码,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 事件之后立即触发,这是我验证的最佳时机。

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

堆栈溢出时不鼓励仅链接答案。请在您的答案中添加简要说明。
2021-03-16 09:59:57

只需检查您的输入字符keyCode,如果它是0或229,那么这里是函数getKeyCode(),它使用JS的charCodeAt返回KeyCode,该KeyCode以输入字符串为参数并返回最后一个字符的键码。

<script>
        var getKeyCode = function (str) {
            return str.charCodeAt(str.length);
        }


        $('#myTextfield').on('keyup',function(e){

            //for android chrome keycode fix
            if (navigator.userAgent.match(/Android/i)) {

                var inputValue = this.value;

                var charKeyCode = e.keyCode || e.which;
                if (charKeyCode == 0 || charKeyCode == 229) { 
                    charKeyCode = getKeyCode(inputValue);
                    alert(charKeyCode+' key Pressed');
                }else{
                   alert(charKeyCode+' key Pressed');
                    }
            }       
        });
    </script>
AkshayTilekar,酷:)
2021-04-06 09:59:57
这甚至不是解决方案。如果我不在输入框的末尾输入怎么办。
2021-04-06 09:59:57
如果我们在文本框之间的某处输入文本,这将失败
2021-04-09 09:59:57
@ImamudinNaseem 是的,在那种情况下,我们将不得不修改与场景匹配的代码。但 AFAIK 这是您可以与虚拟键盘的按键交互以获取键值的唯一方法
2021-04-12 09:59:57
@ImamudinNaseem :)
2021-04-13 09:59:57

有一个textInput事件可以为您提供输入的字符

const inputField = document.getElementById('wanted-input-field');

inputField.addEventListener('textInput', function(e) {
    // e.data will be the 1:1 input you done
    const char = e.data; // In our example = "a"

    // If you want the keyCode..
    const keyCode = char.charCodeAt(0); // a = 97

    // Stop processing if "a" is pressed
    if (keyCode === 97) {
        e.preventDefault();
        return false;
    }
    return true;
});