web-dev-qa-db-ja.com

JavaScript e.keyCodeが印刷可能（非制御）文字かどうかを判別

入力可能な文字に対応するJavaScript keyCodesの範囲を知りたいだけです。または、バックスペース、エスケープ、コマンド、シフトなどのような入力不可能な（制御）文字の範囲。そのため、それらを無視できます。

私が尋ねる理由は、String.fromCharCode()を呼び出すと、制御キーに奇妙な文字が生じるためです。たとえば、左コマンドには「[」、左矢印には「％」が表示されます。そのような奇妙。

javascriptkeycode
49
devios1

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;
});

数値キー、文字キー、およびスペースバーのみが、Unicode値を使用するため、String.fromCharCodeに関連するキーコードを持ちます。

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と同様に動作します。

82
Shmiddty

背景のためだけに、「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」イベントの前にいくつかのキーが起動します。

対照的に、「キーダウン」イベントはすべてのキーストロークをキャプチャしますが、charCodeプロパティはありません。では、それがキャラクターキーであるかどうかはどうすればわかりますか？すべてのキーストロークで、keyCodeが複数の範囲の下限と上限内にあるかどうかを確認することは、最適な効率ではありません。 ASCIIの範囲外の文字にも問題があると思われます。

私のアプローチは、イベントの「キー」プロパティの長さをチェックすることです。 「キー」プロパティは、どのキーが押されたかを判断するための「キーコード」の代替です。 controlキーの場合、 "key"プロパティはdescriptive（例： "rightArrow"、 "F12"、 "return"など）です。 文字キーの場合、文字キーの "key"プロパティは文字のみ（例： "a"、 "A"、 "〜"、 "\"など） 。）。したがって、すべての文字キーについて、「キー」プロパティの長さは1になります。一方、制御文字の長さは1を超えます。

Editor.addEventListener('keydown', function(event){
    if (event.key.length == 1){ 
        //// character key
    } else {
        //// control key
    }
})
15
iamio

この記事には、keyCodesのJavascriptのリストがあります。

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

4
Dave Zych

これには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フラグは、式の大文字と小文字を区別しません。

1
denkquer