JS Keycode 和 Safari mobile 是一样的

Question

我想阻止用户在输入字段中只键入数字。使用 javascript :

var shift_on = false;
$document.on('keydown', 'input[type="number"]', function(e) {
    var c = e.keyCode;
    if (c === KEYCODE.SHIFT)
        shift_on = true;

    //number using shift
    if ((shift_on || isMobile) && c >= 48 && c <= 57)
        return true;

    if (c >= KEYCODE.NB_ZERO && c <= KEYCODE.NB_NINE
            || c === KEYCODE.BACKSPACE
            || c === KEYCODE.DEL
            || c === KEYCODE.DOT
            || c === KEYCODE.COMMA
            || c === KEYCODE.ARROW_LEFT
            || c === KEYCODE.ARROW_RIGHT
            || c === KEYCODE.SHIFT
            || c === KEYCODE.CONTROL
            || c === KEYCODE.END
            || c === KEYCODE.HOME
            || c === KEYCODE.TAB
            )
        return true;
    else
        return false;
})

它在 PC 上运行良好，但如果您在移动设备上使用 Safari，按“&”和“7”会得到相同的 keycode=55。

那我怎么知道按键是“&”还是“7”呢？

Answer 1

我会尝试使用 keypress 事件（而不是 keydown），因为移动键盘上的长按键通常具有特殊含义。或者，您可以尝试检查 charCode 而不是 keyCode 来获取实际字符：

var c = String.fromCharCode(e.which);

或

var c = e.charCode;

Answer 2

keyCode不代表字符.

keyCode 对于 7 和 & 对于所有浏览器都是一样的，而不仅仅是 Safari，因为它们是键盘上的相同物理键。这也是为什么第 7 行 (55) 与小键盘 7 (103) 的键不同的原因。

如果您认为此模型已过时，那您是对的。 keyCode 是 legacy and deprecated。

key 给你字符。

event.key 给你输入的字符。它是标准的，不像 keyCode 和 charCode，它支持更多的键。甚至 IE 9+ support it。但是 Safari being the new IE...

var key = event.key || String.fromCharCode( event.charCode );

document.querySelector( 'input' ).addEventListener( 'keypress', function( event ) {
   if ( event.ctrlKey || event.altKey ) return; // Control shortcuts
   var key = event.key || String.fromCharCode( event.charCode ); // Safari & mobile Chrome
   if ( key.length !== 1 || key === '\x00' ) return; // Non-printable keys
   if ( key < '0' || key > '9' ) event.preventDefault(); // Stop non-numeric
});

<input placeholder='Number only'>

在我们手动允许箭头、Enter 或 Ctrl+V 等键后，该代码段工作正常。不过，它不会停止复制和粘贴或 IME input。我们可以做得更好吗？

HTML5 有数字和 phone 数字输入。

根据您的需要，您可以让 HTML5 输入处理它而无需编写任何 JavaScript。它就像 <input type='number'> or <input type='tel'> 一样简单。浏览器将切换到正确的键盘类型并防止提交无效输入。

<input type='number' placeholder='integer'>
<input type='number' placeholder='float' step='2'>
<input type='tel'    placeholder='tel'>

或者，您可以使用 pattern attribute 进行更精细的控制，无论类型如何。

类型/模式是用户友好的，不能通过复制和粘贴或输入法绕过，是未来的证明，并且非常容易维护。它们 widely supported 所有现代浏览器，包括古老的 IE，所以请尽可能使用它们。

JS Keycode 和 Safari mobile 是一样的

JS Keycode is Safari mobile is the same

javascript

safari

keycode