85

数字小键盘上的数字是否与键盘顶部的数字不同?

下面是一些应该在 keyup 事件上运行的 JavaScript,但前提是 keycode 在 48 到 57 之间。代码如下:

$('#rollNum').keyup(function(e) {
    if(e.keyCode >= 48 && e.keyCode <= 57) { //0-9 only
        var max = 15;
        var textLen = $(this).val().length;
        var textLeft = max - textLen;
        . . . 

我的问题是此代码仅响应在键盘顶部输入的数字运行,而不响应从数字键盘输入的数字运行。

我在想答案一定是数字小键盘有不同的 keyCode 值,但我如何找出那些是什么?

4

12 回答 12

176

键码不同。键盘 0-9 是键96105

你的if陈述应该是:

if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105)) { 
  // 0-9 only
}

这是密钥代码的参考指南


- 更新 -

这是一个旧答案,keyCode已被弃用。现在有替代方法可以实现这一点,例如使用key

if ((e.key >= 48 && e.key <= 57) || (e.key >= 96 && e.key <= 105)) { 
  // 0-9 only
}

这是event.key 的输出测试器,感谢@Danziger 提供链接。

于 2012-11-02T14:17:06.400 回答
20

*******************不要使用 KEYCODE !!!! ******************

keyCode的问题是为了避免与键盘顶部的数字组合键,我们必须在键“Shift”“Alt”上添加一个检查以避免特殊字符,例如e @ & “ { } ...

最简单的解决方案是将e.key转换为数字并检查转换是否给出NaN

let key = Number(e.key)
if (isNaN(key) || e.key === null || e.key === ' ') {
  console.log("is not numeric")
}
else {
  console.log("is numeric")
}

如果 e.key 为null空格,请小心,它给出0

Number(5)         // => 5
Number('5')       // => 5
Number(null)      // => 0 
Number(' ')       // => 0
Number('chars')   // => NaN
Number(undefined) // => NaN
于 2018-01-09T15:06:56.147 回答
8

你可以简单地运行

$(document).keyup(function(e) {
    console.log(e.keyCode);
});

在浏览器控制台中查看按键的代码。

或者您可以在这里找到关键代码:https ://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode#Numpad_keys

于 2012-11-02T14:23:32.397 回答
6

keyCode 对于数字键盘上的数字和键盘顶部的数字是不同的。

键码:

键盘顶部的数字(0 - 9) : 48 - 57
数字键盘上的数字 (0 - 9) : 96 - 105

JavaScript 条件:

if((e.keyCode >= 48 && e.keyCode <=57) || (e.keyCode >= 96 && e.keyCode <=105)) { 
    // entered key is a number
}

所有键码的参考(带演示): http: //www.codeforeach.com/javascript/keycode-for-each-key-and-usage-with-demo

于 2016-10-26T11:20:00.267 回答
2

对于需要 CTRL+C、CTRL-V 解决方案的人来说,这里是:

    /**
     * Retrieves the number that was pressed on the keyboard.
     *
     * @param {Event} event The keypress event containing the keyCode.
     * @returns {number|null} a number between 0-9 that was pressed. Returns null if there was no numeric key pressed.
     */
    function getNumberFromKeyEvent(event) {
        if (event.keyCode >= 96 && event.keyCode <= 105) {
            return event.keyCode - 96;
        } else if (event.keyCode >= 48 && event.keyCode <= 57) {
            return event.keyCode - 48;
        }
        return null;
    }

它使用第一个答案的逻辑。

于 2018-04-09T12:49:04.210 回答
2

要添加其他一些答案,请注意:

  • keyup并且keydown 不同于keypress
  • 如果你想用来String.fromCharCode()从 获取实际数字keyup,你需要首先对keyCode.

下面是一个自文档示例,它确定键是否为数字,以及它是哪个数字(示例使用range函数 fromlodash)。

const isKeypad = range(96, 106).includes(keyCode);
const normalizedKeyCode = isKeypad ? keyCode - 48 : keyCode;
const isDigit = range(48, 58).includes(normalizedKeyCode);
const digit = String.fromCharCode(normalizedKeyCode);
于 2019-08-19T15:42:31.217 回答
2

是的,它们是不同的,虽然很多人都提出了使用 console.log 亲自查看的好建议。但是,我没有看到有人提到 event.location ,您可以使用它来确定数字是来自小键盘还是来自event.location === 3主键盘/通用键的顶部event.location === 0。当您通常需要确定击键是否来自键盘区域时,这种方法最适合,event.key对于特定键可能更好。

于 2020-03-31T14:11:34.683 回答
1

您可以使用关键代码页来查找:

事件代码

区分数字键盘。

https://keycode.info/

function getNumberFromKeyEvent(event) {
   if (event.code.indexOf('Numpad') === 0) {
      var number = parseInt(event.code.replace('Numpad', ''), 10);
      if (number >= 0 && number <= 9) {
           // numbers from numeric keyboard
      }
   }
}
于 2019-10-23T19:53:01.217 回答
1

文档说与 onkeyxxx 事件相关的事件顺序:

  1. onkeydown
  2. 按键按下
  3. onkeyup

如果您使用如下代码,它也适合退格并输入用户交互。在你可以在 onKeyPress 或 onKeyUp 事件中做你想做的事之后。代码块触发 event.preventDefault 函数,如果值不是数字,退格或回车。

onInputKeyDown = event => {
    const { keyCode } = event;
    if (
      (keyCode >= 48 && keyCode <= 57) ||
      (keyCode >= 96 && keyCode <= 105) ||
      keyCode === 8 || //Backspace key
      keyCode === 13   //Enter key
    ) {
    } else {
      event.preventDefault();
    }
  };
于 2020-05-06T11:26:32.417 回答
0

@.A 的回答。我发现Morel 是最易于理解且占用空间小的解决方案。如果您想要更小的代码量,只是想在顶部添加此解决方案,它是对 Morel 的修改,适用于不允许任何类型的字母,包括输入臭名昭著的“e”字符。

function InputTypeNumberDissallowAllCharactersExceptNumeric() {
  let key = Number(inputEvent.key);
  return !isNaN(key);
}
于 2018-08-01T14:24:12.767 回答
0

一点点清除@A.Morel的答案。您可能要注意键盘语言布局。一些键盘布局将默认数字键更改为符号。

let key = parseInt(e.key)
if (isNaN(key)) {
  console.log("is not numeric")
}
else {
  console.log("is numeric")
}
于 2020-12-16T04:40:58.340 回答
-2

您可以使用它来轻松找出 keyCodes:

$(document).keyup(function(e) {
    // Displays the keycode of the last pressed key in the body
    $(document.body).html(e.keyCode);
});

http://jsfiddle.net/vecvc4fr/

于 2014-09-11T14:51:05.190 回答