65

我只想知道keyCode对应于可输入字符的 JavaScript 范围；或者，不可键入（控制）字符的范围，如退格、转义、命令、移位等，所以我可以忽略它们。

我问的原因是调用String.fromCharCode()导致控制键出现奇怪的字符。例如，我得到左命令的“[”，左箭头的“％”。这样的怪事。

4

6 回答 6

96

Keydown 将为您提供按下的键的 keyCode，无需任何修改。

$("#keypresser").keydown(function(e){
    var keycode = e.keyCode;

    var valid = 
        (keycode > 47 && keycode < 58)   || // number keys
        keycode == 32 || keycode == 13   || // spacebar & return key(s) (if you want to allow carriage returns)
        (keycode > 64 && keycode < 91)   || // letter keys
        (keycode > 95 && keycode < 112)  || // numpad keys
        (keycode > 185 && keycode < 193) || // ;=,-./` (in order)
        (keycode > 218 && keycode < 223);   // [\]' (in order)

    return valid;
});

只有数字键、字母键和空格键具有相关的键码，String.fromCharCode因为它使用 Unicode 值。

Keypress 将是输入文本的 charCode 表示。请注意，如果由于按键而没有“打印”任何文本，则不会触发此事件。

$("#keypresser").keypress(function(e){
    var charcode = e.charCode;
    var char = String.fromCharCode(charcode);
    console.log(char);
});

http://jsfiddle.net/LZs2D/1/将演示这些是如何工作的。

KeyUp 的行为类似于 KeyDown。

于 2012-09-17T21:50:45.770 回答
21

仅作为背景，每当您按下字符键时，“keypress”事件都会为您提供一个charCode属性。

Editor.addEventListener('keypress', function(event){
    if (event.charCode) {
        //// character key
        console.log( String.fromCharCode(event.charCode) ); /// convert charCode to intended character.
    } else {
        //// control key
    }

然而，“keypress”事件并没有捕捉到每一次击键——在“keypress”事件之前会触发几个键。

相反，“keydown”事件将捕获每个击键，但它没有charCode属性。那么我们如何判断它是否是字符键呢？检查每个击键是否keyCode在多个范围的上下限内并不是最有效的。我怀疑 ASCII 范围之外的字符也存在问题。

我的方法是检查事件“key”属性的长度。“key”属性是“keyCode”的替代方法，用于确定按下了哪个键。对于控制键，“key”属性是描述性的（例如“rightArrow”、“F12”、“return”等）。对于字符键，字符键的“key”属性就是字符（例如“a”、“A”、“~”、“\”等）。因此，对于每个字符键，“键”属性的长度将为 1；而控制字符的长度将大于 1。

Editor.addEventListener('keydown', function(event){
    if (event.key.length == 1){ 
        //// character key
    } else {
        //// control key
    }
})
于 2018-04-02T13:39:40.460 回答
18

我注意到所有长度为 1 的字符（'A'、'B'、数字、符号）都是可打印的，所以我只使用。我也将此解决方案用于非英语字符：

if(e.key.length==1)
    print();
于 2019-11-01T11:59:22.040 回答
4

keyCodes这篇文章有一个列表Javascript：

http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

于 2012-09-17T21:21:11.330 回答
1

您也可以为此使用 RegEx：

$(".input").keyup(function (event) {
    if (event.key.match(/^[\d\w]$/i)) {
      // put function to trigger when a digit or a word character is pressed here
    }

该i标志使表达式不区分大小写。

于 2019-08-07T23:34:24.793 回答
0

截至 2021 年，一个简单的方法是通过InputEvent's.

这仅适用于<input>、<select>和<textarea>，这应该是大多数情况：

function handleInput(event) {
  if (event.inputType === 'insertText' || event.inputType === 'insertCompositionText') {
    console.log('Input Detected', event.data)
  }
}

element.oninput = handleInput
// or
element.addEventListener('input', handleInput)

该insertCompositionText属性允许我们检测一些预先组合的字符。

<input>对于,<select>和以外的标签<textarea>，我们可以使用带有Tim Perry 提到的修复的keydownevent with ：event.key.length

function handleKeydown(event) {
  if([...event.key].length === 1 && !event.ctrlKey && !event.metaKey) {
    console.log('Key Detected', event.key)
  }
}
element.onkeydown = handleKeydown
// or
element.addEventListener('keydown', handleKeydown)

尽管如此，我相信在识别一些预先组合的字符和其他怪癖时，两者都会遇到困难。

于 2021-12-18T07:52:24.780 回答