跨浏览器获取keyCode

Question

我正试图通过跨浏览器的方式来倾听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到v37)中,在用户键入返回之前不会触发⏎.
  实际上,我发现如果输入的值不为空,那么它至少在加载时效果很好.所以我想到了一个像这样的解决方法:if(this.value=='')this.value='*'; 似乎工作但是如果你垃圾邮件它,退格键 ⌫没有被阻止,所以当输入被清除时,错误会回来:解决方法也不会解决.
  +这是一个丑陋的解决方法,我肯定会在其他浏览器中创建其他错误.
  

     
     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退格⌫(keycode 8)或返回⏎(keyCode 13)键.任何其他密钥将返回0.

所以,我的问题是,你知道一个更好的跨浏览器方式来听keyCode,一个在所有主流浏览器,桌面或移动,以及fennec工作吗？

Ps:即使我在vanilla-js中编写我的应用程序,我也可以看到任何库的解决方案.

Answer 1

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

根据此站点，当通过用户界面更改元素的文本内容时，事件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>