JS键码是Safari手机是一样的

JS Keycode is Safari mobile is the same

本文关键字：一样 键码 Safari 手机 JS      更新时间：2023-09-26

我想防止用户在输入字段中只键入数字。使用 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"会给出相同的键代码= 55。

那么我怎么知道按键是"&"或"7"？

keyCode并不意味着

字符。

keyCode 对于 7 和 & 对于所有 borwser 都是相同的，而不仅仅是 Safari，因为它们是键盘上的相同物理键。这也是为什么数字行 7 （55） 与数字键盘 7 （103） 是不同的键。

如果你认为这个模型已经过时了，你是对的。 keyCode 是遗留的，已弃用。

key给你性格。

事件.key为您提供正在键入的字符。它是标准的，不像keyCode和charCode，它支持更多的键。甚至IE 9+也支持它。但是随着Safari成为新的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 输入。我们能做得更好吗？

HTML5具有数字和电话号码输入功能。

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

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

或者，您可以使用 pattern 属性进行更精细的控制，而不考虑类型。

类型/模式是用户友好的，无法通过复制和粘贴或 IME 绕过，非常面向未来，并且非常易于维护。所有现代浏览器都广泛支持它们，包括古老的IE，因此请尽可能使用它们。

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

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

或

var c = e.charCode;
相关文章：