10

我正在尝试一种跨浏览器的方式来收听keyCode用户的keyDown.

对于移动浏览器，我必须触发虚拟键盘，所以我使用由 css 隐藏的输入，由click事件触发。这很好用，除了当我尝试在 fennec（移动 Firefox）上收听键码时，我有奇怪的行为。

这是我用来收听的功能keycode。 

document.querySelectorAll('input')[0].addEventListener('keydown', handler);

function handler(e) {
  e.preventDefault();
  var k = (e.which) ? e.which : e.keyCode;
  document.getElementById('log').innerHTML = k;
  this.style.backgroundColor = "#FFAAFF";
}
<input type="text" />
<span id="log"></span>

  • 在 Firefox for android (v34 to v37)中，在用户输入 return 之前它不会触发⏎</kbd>.
    Actually, I found that if the value of the input is not empty, it works well, at least on load. So I thought of a workaround like this one : if(this.value=='')this.value='*'; Seems to work but if you spam it, the backspace ⌫</kbd> isn't blocked, so when the input is cleared, the bug comes back : the workaround doesn't fire either.
    +This a ugly workaround, which I'm sure will create other bugs in other browsers.

       
   document.querySelectorAll('input')[0].addEventListener('keydown', handler);
   
   function handler(e) {
     if(this.value=='')this.value='*';
     e.preventDefault();
     var k = (e.which) ? e.which : e.keyCode;
     document.getElementById('log').innerHTML = k;
     this.style.backgroundColor = "#FFAAFF";
   }
   
   
       
   <input type="text" value="*"/>
   <span id="log"></span>

  • 在 B2G（设备上的 Firefox Os 1.3 或模拟的 2.0）中，行为更加奇怪：
    该函数仅读取keyCode退格键⌫</kbd>(keycode 8) or return⏎</kbd>(keyCode 13) keys. Any other key will return 0.

所以，我的问题是，你知道一种更好的跨浏览器收听方式吗keyCode，一种适用于所有主要浏览器、桌面或移动设备以及 fennec 的方式？

Ps：即使我用 vanilla-js 编写我的应用程序，我也可以看到任何库的解决方案。

4

1 回答 1

2

没有一个完美的解决方案可以跨浏览器和操作系统收听 KeyCode ......仅仅是因为 javascript 使用与它运行的操作系统报告的相同的 Key Code。您最好使用该input事件而不是keyDown

根据this site，input当通过用户界面更改元素的文本内容时会发生事件，这是您想要的，因为在某些移动浏览器/操作系统中，事件在用户输入输入并且事件触发之前不会change触发。

$(document).ready(function () {
    var inputEvent = 'oninput' in window ? 'input' : 'keyup';
    $('#listen').on(inputEvent, function (event) {
        $('#show').val($('#show').val() + '\n' + event.type);
        console.log('--- input event ----');
        for (var v in event.originalEvent) {
            if (event.hasOwnProperty(v)) {
                console.log(v + ' |---> ' + event[v]);
            }
        }
    })
    //just added to see what Silk listens for on the keyup event
    $('#listen').on('keyup', function (event) {
        $('#show').val($('#show').val() + '\n' + event.type + ' | which --> ' + event.which);
        console.log('--- keyup event ----');
        for (var v in event.originalEvent) {
            if (event.hasOwnProperty(v)) {
                console.log(v + ' |-.-> ' + event[v]);
            }
        }
    })
});
input {
    font-size: 22px
}
input, textarea {
    width:300px;
}
textarea {
    height:300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
    <input type='text' id="listen" />
    <br/>
    <br/>
    <textarea type='text' id="show"></textarea>
</div>

于 2014-12-16T18:30:23.677 回答