如何在禁用keyCodes后允许选项卡

Question

我有一个输入字段，我只希望将数字插入其中。

为此，我在输入中添加了以下属性：

 onkeypress="return event.charCode == 8 || event.charCode == 9 || event.charCode == 37 || event.charCode == 39 || event.charCode == 46 || event.charCode >= 48 && event.charCode <= 57" 

注：

                /*
                    keycodes allowed :
                    37 : left
                    39: right
                    46: decimal
                    48-57: digits + -
                    8: backSpace
                    9: tab
                */

我的问题(仅在Firefox中)是TAB无法从一个字段切换到另一个字段。

知道怎么实现吗？

Answer 1

以下是我的建议：

• 在检测不可打印字符时，应使用keydown。
• 您必须使用event.which和event.keyCode。charCode被否决了。请参阅https://developer.mozilla.org/en-US/docs/Web/API/event.charCode
• 使用preventDefault防止字符可靠地打印。
• 不要将JavaScript嵌入到HTML属性中，它很难重用和读取。

这是你可以用的东西

​

document.getElementById('something').addEventListener('keydown', function(e) {
    var keyCode = e.keyCode|| e.which;
    var nonPrintableAllowed = [8,9,37,39,46];
    var isDigit = keyCode >= 48 && keyCode <= 57;                           
    var isAllowed = nonPrintableAllowed.indexOf(keyCode) > -1 || isDigit;
    console.log(isAllowed);
    if (!isAllowed) {
        e.preventDefault();
    }
});

<input id="something" /><input /> <input />

​

Answer 2

处理键盘键仍然很棘手，浏览器之间不兼容，规范定义浏览器不支持的方法等等。然而，在这种情况下，解决方案似乎很简单。如果您的代码在其他相关浏览器上工作，您可以使用事件的 property来处理Firefox。它的值是选项卡键的字符串Tab。

​

:focus { background: yellow } /* Just to show where the focus is */

<input onkeypress="console.log(event.key);return event.charCode == 8
|| event.charCode == 9 || event.charCode == 37 || event.charCode == 39
|| event.charCode == 46 || event.charCode >= 48 && event.charCode <= 57
|| event.key == 'Tab'" >
<input>

​