JavaScriptのKeyCodeから文字値を取得し、トリミングします

152

これは私が今持っているものです：

$("input").bind("keydown",function(e){
    var value = this.value + String.fromCharCode(e.keyCode);
}

場合はe.keyCodeASCII文字ではないかもしれない（Alt、backspace、del、arrows。、など）...私は今まで必要があるだろうtrimから、これらの値value何とか（好ましくは、プログラムで-ないルックアップテーブルで）。

私はjQueryを使用しています。

keydownイベントを利用する必要があります。keyPress私は（キャプチャに必要な特定のキーのために活性化しないEsc、del、backspace、など）。

setTimeout入力の値を取得するために使用することはできません。setTimeout(function(){},0)遅すぎる。

javascript  jquery  special-characters  keycode 
— デビッドマードック
ソース
11
keydown文字コードをキャプチャするために使用する必要がありますか？あなたは乗り心地の地獄にいます：quirksmode.org/js/keys.html（ヒント：!!を使用してくださいkeypress）
— Crescent Fresh
1
キャラクターの大文字小文字は問いません。そして、少なくともFFとIEのために、上、下、左、右、esc、del、バックスペースをキャプチャする必要があります。キープレスは問題外です。ヒントをありがとう。:-)
— デビッドマードック
この問題に対応するために、jQueryプラグインを作成しました。
— ブライアンピーコック
1
KeyCodeの問題を解決しようとしてここに来たが、実際にはどのキーが押されたかを見たいだけの場合は、この回答を確認してください。TLDR：document.onkeydown = function(e){ console.log('Key: ' + e.key); }
— user1717828

回答:

164

多分私は質問を正しく理解していませんが、keyup両方の入力をキャプチャしたい場合は使用できませんか？

$("input").bind("keyup",function(e){
    var value = this.value + String.fromCharCode(e.keyCode);
});
— デビッドヘルシング
ソース
10
これは、ASCIIの範囲外にある他のロケール（たとえば、ラテン語1、ドイツ語、フランス語、イタリア語、スペイン語など、知っている必要がある場合）では機能しません。明らかに、印刷不可能なキーでも失敗します。
— FlorianBösch2013年
9
これは、テンキーで数字を使用する場合にも失敗します。e.keyCodeは、ASCII（またはUTF-x）コードではありません。
— Tom Chiverton、2014年
2
不正解です。基本的な文字でも機能しません。たとえば、セミコロンkeyCodeは186で、その上でString.fromCharCode（）を実行すると、ゴミが発生します。問題は、keyCodeがすべての文字のASCIIに対応していないことです。セミコロンのASCII文字は59です。同じ問題がすべての特殊文字に当てはまり、keyCodeはString.fromCharCode（）の正しいコードを返しません。
— アレクサンダーTsepkov
193

私の経験でString.fromCharCode(e.keyCode)は信頼できません。 String.fromCharCode引数としてユニコード文字コードが必要です。e.keyCodeJavaScriptキーコードを返します。JavascriptキーコードとUnicodeコードコードは同じものではありません！特に、テンキーのキーkeycodeは通常の数字キーとは異なり（それらは異なるキーであるため）、キーは異なりますkeycodeが、upperとlowercase文字の両方（同じ場合は同じキーを押しました）には同じキーが返されますcharcodes。

たとえば、通常の数字キー1はkeycode49のイベントを生成し、数字パッドキー1（Numlockオン）はkeycode97を生成String.fromCharCodeします。

String.fromCharCode(49) returns "1"
String.fromCharCode(97) returns "a"

String.fromCharCodeJavaScriptキーコードではなく、Unicode文字コードが必要です。キーaは、生成するkeycode文字の大文字小文字に関係なく、65のイベントを生成します（イベントでShiftキーが押された場合などの修飾子もあります）。文字はaユニコード有するcharcode文字はながら61をA有しているcharcode（例えば、に従って41のhttp://www.utf8-chartable.de/）。ただし、これらはhex値であり、10進数に変換するとcharcode、「A」の場合は65、「a」の場合は97になります。[1] これはString.fromCharCode、これらの値から得られるものと一致しています。

私自身の要件は、数字と通常の文字の処理（文字列内の位置に応じて受け入れまたは拒否）と、制御文字（F-keys、Ctrl-something）の通過に限定されていました。したがって、制御文字をチェックできます。それが制御文字でない場合は、範囲に対してチェックし、その後実際の文字を取得する必要があります。私は大文字と小文字を気にせず（とにかくすべての文字を大文字に変更します）、キーコードの範囲を既に制限しているので、テンキーのキーについてのみ心配する必要があります。そのためには以下で十分です。

String.fromCharCode((96 <= key && key <= 105)? key-48 : key)

より一般的には、aから確実に文字を返す関数はcharcode（多分jQueryプラグインとして）素晴らしいですが、今すぐ書く時間はありません。ごめんなさい。

また、私は言及したいe.which（あなたはjQueryのを使用している場合）、正規化しているe.keyCodeとe.charCodeあなたがソートキーのが押されたかについて心配する必要はありませんのでこと、。それをString.fromCharCode残りと組み合わせる問題。

[1]しばらく混乱しました-。すべてのドキュメントはString.fromCharCodeunicode を期待していると言っていますが、charcode実際にはASCII文字コードでは機能するように見えましたが、16進数から10進数に変換する必要があるため、ASCII文字コードとUnicode 10進数文字コードが通常のコードと重複しているためです。ラテン文字。

— アダム
ソース
2
このコメントは私のすべての問題をかなり解決しました。jQueryがjavascriptの "String.fromCharCode"に相当する "fromKeyCode"を実装していないことは私にとって驚くべきことです
— クリスJ
27
KeyPressイベントがこれを行うようです。stackoverflow.com/a/9350415/209568を参照してください。jQuery docsから「keydownとkeyupはどのキーが押されたかを示すコードを提供し、keypressはどの文字が入力されたかを示すことに注意してください。たとえば、小文字の "a"はkeydownとkeyupでは65、keypressでは97と報告されます。 。大文字の "A"はすべてのイベントで65として報告されます。この違いのため、矢印キーなどの特殊なキーストロークをキャッチする場合は、.keydown（）または.keyup（）を選択することをお勧めします。 "
— アダム
これは、キーダウンにハマっている私たちにとって最も不愉快です。
— Isaac Bolinger 2015年
ASCIIとUnicodeに関する最後のビットに関するメモ。Unicodeでは、128個のASCII文字がすべて同じ場所にあります。これは、元々ASCIIとしてエンコードされたファイルを、作業を必要とせずにUnicodeに見せかける（そして変換する）ことができるようにするための意図的なものです。ただし、拡張ASCII文字は同じ場所にないため、これらの文字を使用した場合、運が悪くなります。
— DanielM 2015
1
のポイントkeyCodeは、どのキーが押されたかを知ることであり、どの文字を使用するかを知ることではありません。たとえば、Dvorakキーボードの「U」は、QWERTYキーボードの「F」または韓国語キーボードの「ㄹ」などと同じキーコードを持っています。重要なのは、文字に変換するのではなく、そこにあるためです。物事をキーボードの位置に簡単にマッピングします。
— ビンセントマクナブ
77

キーコードで索引付けされた読み取り可能なキー名

私は単純に数を変換することができるように、私は単に静的配列内のすべての対応する値をリストされているので、比較的少数のキーコードがあります65にA使用しましたkeyboardMap[65]

すべてのキーコードが印刷可能な文字にマッピングされるわけではないため、他の識別可能な文字列が返されます。

必要に応じて配列を変更する必要がある場合があり、翻訳する必要のないすべての文字に対して空の文字列を返すだけです。次の配列により、どの環境でもどのキーが押されたかをすばやく確実に判別できます。楽しい！

// names of known key codes (0-255)

var keyboardMap = [
  "", // [0]
  "", // [1]
  "", // [2]
  "CANCEL", // [3]
  "", // [4]
  "", // [5]
  "HELP", // [6]
  "", // [7]
  "BACK_SPACE", // [8]
  "TAB", // [9]
  "", // [10]
  "", // [11]
  "CLEAR", // [12]
  "ENTER", // [13]
  "ENTER_SPECIAL", // [14]
  "", // [15]
  "SHIFT", // [16]
  "CONTROL", // [17]
  "ALT", // [18]
  "PAUSE", // [19]
  "CAPS_LOCK", // [20]
  "KANA", // [21]
  "EISU", // [22]
  "JUNJA", // [23]
  "FINAL", // [24]
  "HANJA", // [25]
  "", // [26]
  "ESCAPE", // [27]
  "CONVERT", // [28]
  "NONCONVERT", // [29]
  "ACCEPT", // [30]
  "MODECHANGE", // [31]
  "SPACE", // [32]
  "PAGE_UP", // [33]
  "PAGE_DOWN", // [34]
  "END", // [35]
  "HOME", // [36]
  "LEFT", // [37]
  "UP", // [38]
  "RIGHT", // [39]
  "DOWN", // [40]
  "SELECT", // [41]
  "PRINT", // [42]
  "EXECUTE", // [43]
  "PRINTSCREEN", // [44]
  "INSERT", // [45]
  "DELETE", // [46]
  "", // [47]
  "0", // [48]
  "1", // [49]
  "2", // [50]
  "3", // [51]
  "4", // [52]
  "5", // [53]
  "6", // [54]
  "7", // [55]
  "8", // [56]
  "9", // [57]
  "COLON", // [58]
  "SEMICOLON", // [59]
  "LESS_THAN", // [60]
  "EQUALS", // [61]
  "GREATER_THAN", // [62]
  "QUESTION_MARK", // [63]
  "AT", // [64]
  "A", // [65]
  "B", // [66]
  "C", // [67]
  "D", // [68]
  "E", // [69]
  "F", // [70]
  "G", // [71]
  "H", // [72]
  "I", // [73]
  "J", // [74]
  "K", // [75]
  "L", // [76]
  "M", // [77]
  "N", // [78]
  "O", // [79]
  "P", // [80]
  "Q", // [81]
  "R", // [82]
  "S", // [83]
  "T", // [84]
  "U", // [85]
  "V", // [86]
  "W", // [87]
  "X", // [88]
  "Y", // [89]
  "Z", // [90]
  "OS_KEY", // [91] Windows Key (Windows) or Command Key (Mac)
  "", // [92]
  "CONTEXT_MENU", // [93]
  "", // [94]
  "SLEEP", // [95]
  "NUMPAD0", // [96]
  "NUMPAD1", // [97]
  "NUMPAD2", // [98]
  "NUMPAD3", // [99]
  "NUMPAD4", // [100]
  "NUMPAD5", // [101]
  "NUMPAD6", // [102]
  "NUMPAD7", // [103]
  "NUMPAD8", // [104]
  "NUMPAD9", // [105]
  "MULTIPLY", // [106]
  "ADD", // [107]
  "SEPARATOR", // [108]
  "SUBTRACT", // [109]
  "DECIMAL", // [110]
  "DIVIDE", // [111]
  "F1", // [112]
  "F2", // [113]
  "F3", // [114]
  "F4", // [115]
  "F5", // [116]
  "F6", // [117]
  "F7", // [118]
  "F8", // [119]
  "F9", // [120]
  "F10", // [121]
  "F11", // [122]
  "F12", // [123]
  "F13", // [124]
  "F14", // [125]
  "F15", // [126]
  "F16", // [127]
  "F17", // [128]
  "F18", // [129]
  "F19", // [130]
  "F20", // [131]
  "F21", // [132]
  "F22", // [133]
  "F23", // [134]
  "F24", // [135]
  "", // [136]
  "", // [137]
  "", // [138]
  "", // [139]
  "", // [140]
  "", // [141]
  "", // [142]
  "", // [143]
  "NUM_LOCK", // [144]
  "SCROLL_LOCK", // [145]
  "WIN_OEM_FJ_JISHO", // [146]
  "WIN_OEM_FJ_MASSHOU", // [147]
  "WIN_OEM_FJ_TOUROKU", // [148]
  "WIN_OEM_FJ_LOYA", // [149]
  "WIN_OEM_FJ_ROYA", // [150]
  "", // [151]
  "", // [152]
  "", // [153]
  "", // [154]
  "", // [155]
  "", // [156]
  "", // [157]
  "", // [158]
  "", // [159]
  "CIRCUMFLEX", // [160]
  "EXCLAMATION", // [161]
  "DOUBLE_QUOTE", // [162]
  "HASH", // [163]
  "DOLLAR", // [164]
  "PERCENT", // [165]
  "AMPERSAND", // [166]
  "UNDERSCORE", // [167]
  "OPEN_PAREN", // [168]
  "CLOSE_PAREN", // [169]
  "ASTERISK", // [170]
  "PLUS", // [171]
  "PIPE", // [172]
  "HYPHEN_MINUS", // [173]
  "OPEN_CURLY_BRACKET", // [174]
  "CLOSE_CURLY_BRACKET", // [175]
  "TILDE", // [176]
  "", // [177]
  "", // [178]
  "", // [179]
  "", // [180]
  "VOLUME_MUTE", // [181]
  "VOLUME_DOWN", // [182]
  "VOLUME_UP", // [183]
  "", // [184]
  "", // [185]
  "SEMICOLON", // [186]
  "EQUALS", // [187]
  "COMMA", // [188]
  "MINUS", // [189]
  "PERIOD", // [190]
  "SLASH", // [191]
  "BACK_QUOTE", // [192]
  "", // [193]
  "", // [194]
  "", // [195]
  "", // [196]
  "", // [197]
  "", // [198]
  "", // [199]
  "", // [200]
  "", // [201]
  "", // [202]
  "", // [203]
  "", // [204]
  "", // [205]
  "", // [206]
  "", // [207]
  "", // [208]
  "", // [209]
  "", // [210]
  "", // [211]
  "", // [212]
  "", // [213]
  "", // [214]
  "", // [215]
  "", // [216]
  "", // [217]
  "", // [218]
  "OPEN_BRACKET", // [219]
  "BACK_SLASH", // [220]
  "CLOSE_BRACKET", // [221]
  "QUOTE", // [222]
  "", // [223]
  "META", // [224]
  "ALTGR", // [225]
  "", // [226]
  "WIN_ICO_HELP", // [227]
  "WIN_ICO_00", // [228]
  "", // [229]
  "WIN_ICO_CLEAR", // [230]
  "", // [231]
  "", // [232]
  "WIN_OEM_RESET", // [233]
  "WIN_OEM_JUMP", // [234]
  "WIN_OEM_PA1", // [235]
  "WIN_OEM_PA2", // [236]
  "WIN_OEM_PA3", // [237]
  "WIN_OEM_WSCTRL", // [238]
  "WIN_OEM_CUSEL", // [239]
  "WIN_OEM_ATTN", // [240]
  "WIN_OEM_FINISH", // [241]
  "WIN_OEM_COPY", // [242]
  "WIN_OEM_AUTO", // [243]
  "WIN_OEM_ENLW", // [244]
  "WIN_OEM_BACKTAB", // [245]
  "ATTN", // [246]
  "CRSEL", // [247]
  "EXSEL", // [248]
  "EREOF", // [249]
  "PLAY", // [250]
  "ZOOM", // [251]
  "", // [252]
  "PA1", // [253]
  "WIN_OEM_CLEAR", // [254]
  "" // [255]
];

注： 上記の配列内の各値の位置は重要です。""未知の値を持つコードのプレースホルダです。

この静的配列ルックアップアプローチを使用して次のコードスニペットを試してください...

コードスニペットを表示

注目に値するキーコード

文字AZ：（65-90）

keyboardMap[65];  // A
...
keyboardMap[90];  // Z

数字0-9：（48-57）

keyboardMap[48];  // 0
...
keyboardMap[57];  // 9

テンキー0-9：（96-105）

keyboardMap[96];   // NUMPAD0
...
keyboardMap[105];  // NUMPAD9

矢印キー：（37-40）

keyboardMap[37];  // LEFT
keyboardMap[38];  // UP
keyboardMap[39];  // RIGHT
keyboardMap[40];  // DOWN

タブキー：（9）

keyboardMap[9];  // TAB

キーを入力してください：（13）

keyboardMap[13];  // ENTER

スペースバーキー：（32）

keyboardMap[32];  // SPACE

OS固有のキー（91）Windowsキー（Windows）またはコマンドキー（Mac）

keyboardMap[91];  // OS_KEY

Altキー：（18）

keyboardMap[18];  // ALT

コントロールキー：（17）

keyboardMap[17];  // CONTROL

シフトキー：（16）

keyboardMap[16];  // SHIFT

Caps Lockキー：（20）

keyboardMap[20];  // CAPS_LOCK
— DaveAlger
ソース
特殊文字で機能しない、シフトキーでキーを入力する場合、解決策はありますか？
— Shaik Matheen 2017年
14

ただ重要な注意：上記の受け入れられた回答は、keyCode> = 144、つまりピリオド、コンマ、ダッシュなどでは正しく機能しません。これらの場合は、より一般的なアルゴリズムを使用する必要があります。

let chrCode = keyCode - 48 * Math.floor(keyCode / 48);
let chr = String.fromCharCode((96 <= keyCode) ? chrCode: keyCode);

理由が気になる場合は、組み込みのJS関数の動作のため、これは明らかに必要String.fromCharCode()です。その値についてkeyCode <= 96は、関数を使用してマップするようです：

chrCode = keyCode - 48 * Math.floor(keyCode / 48)

その値についてkeyCode > 96は、関数を使用してマップするようです：

chrCode = keyCode

これが奇妙な振る舞いのように思える場合は、まあ..同意する。悲しいことに、それはJSコアで見た最も奇妙なものから非常に離れています。

document.onkeydown = function(e) {
    let keyCode = e.keyCode;
    let chrCode = keyCode - 48 * Math.floor(keyCode / 48);
    let chr = String.fromCharCode((96 <= keyCode) ? chrCode: keyCode);
    console.log(chr);
};
<input type="text" placeholder="Focus and Type"/>
スニペットを展開

— 華やか
ソース
1
let2009年の質問の回答に使用して、人々を混乱させます。:-)
— David Murdoch
12
誰かが調べてES6を発見した場合let、私は彼らに賛成しました;-)
— ギャラン
@galarantなぜ/どのように機能するのか説明していただけますか
— Izhar Aazmi 2016
@IzharAazmiが説明を追加しました。それが役に立てば幸い！
— 2016年
1
また、テンキーの数字キー（拡張キーボードの右側にあるキーのグリッド）でも正しく機能しません。
— スコットブキャナン
2

これはゲームまたは高速応答タイプのアプリケーション用であるため、KEYPRESSよりもKEYDOWNを使用すると想定しています。

編集：ダン！私は正直です（ありがとう、クレセントフレッシュとデビッド）：JQuery（または、基になるDOMホスト）は、WM_KEYDOWNおよびその他のイベントの詳細を公開していません。むしろ、このデータを事前にダイジェストし、JQueryでもkeyDownの場合は、

これらのプロパティはUniCode値であることに注意してください。
JQueryドキュメントで信頼できる参照を見つけることができませんでしたが、ネット上の多くの信頼できる例では、これら2つのプロパティを参照しています。

次のコードは、私のjavascriptではなくjavascriptから改作したものなので、完全に間違っています...

以下は、キーコードの「興味深い」部分を示します。

  value = e.KeyCode;
  repeatCount = value & 0xFF;
  scanCode = (value >> 16) & 0xFF;  // note we take the "extended bit" deal w/ it later.
  wasDown = ((value & 0x4000) != 0);  // indicate key was readily down (auto-repeat)
  if (scanCode > 127)
      // deal with extended
  else
      // "regular" character
— mjv
ソース
hm、no go、scanCodeは常に0になります。そしてe.KeyCodeはe.keyCodeでなければなりません（KeyCodeは未定義です）。
— デビッドマードック
こんにちは...こんにちは、待って...何ですか？ここでJScriptを使用していますか？
— クレセントフレッシュ、
@David M.私の悪い、たぶんJQueryが私たちのためにこれらのコード部分を「プレダイジェスト」します。今、調べています。
— mjv 2009年
1
@mjv：このコードはどこで入手しましたか？それはあなたのために働いたことがありますか？AFAIKのDOM実装では、そのすべての情報がイベントオブジェクトにエンコードされます（keydownまたはされません）。
— クレセントフレッシュ
@クレセント：私は、私のJavaコードからすばやく単純にそれを改造しましたが、その時点で古くなっています...とにかく、あなたは完全に正しいです：キーボードの場合でも、DOMホストはそのような生のイベントを渡しません。私はそれに応じて散文を修正しました。JQuery.comからの主題に関する信頼できる文書をまだ探しています
— mjv
0

私はこれが古い質問であることを知っていますが、この問題の事前にパッケージ化された解決策を探して今日出くわしましたが、本当に自分のニーズを満たすものは何も見つかりませんでした。

以下は、大文字（シフト）、小文字、句読点、数字キーパッドなどを正しくサポートするソリューション（英語のみ）です。

また、ESC、矢印、ファンクションキーなどの印刷不可能なキーを簡単かつ簡単に識別できます。

https://jsfiddle.net/5hhu896g/1/

keyboardCharMap and keyboardNameMap are the key to making this work

タイピングを省いてくれたDaveAlgerに感謝します-そして多くの発見！-名前付きキー配列を提供する。

— BRebey
ソース
あなたのバイオリンは最も優れています！共有いただきありがとうございます。それは素晴らしい働きをします。私はそれを使用して、同じ値を持つアイテムを持つフォームフィールドのSublimeスタイルのマルチカーソル編集を実装しています
— Todd Hammer
0

私は最近と呼ばれるモジュールを書いたkeysight変換keypress、keydownおよびkeyupそれぞれの文字とキーにイベントを。

例： 

 element.addEventListener("keydown", function(event) {
    var character = keysight(event).char
 })
— BT
ソース
ñのようなキーをサポートしていますか？
— Arnold Roa
@ArnoldRoaそのようなキャラクターをサポートすることを期待して何かをプッシュしました。アクセント付き文字のキーボードがないので、テストしてもらえますか？
— BT
0

ここに来て、私と同じようにキーコードの実際のUnicode文字値を探している人のために、ここにその関数があります。たとえば、右矢印のユニコードキーコードを指定すると、表示される文字列が出力されます\u001B\u005B\u0043

function toUnicode(theString) {
    var unicodeString = '';
    for (var i = 0; i < theString.length; i++) {
        var theUnicode = theString.charCodeAt(i).toString(16).toUpperCase();
        while (theUnicode.length < 4) {
            theUnicode = '0' + theUnicode;
        }
        theUnicode = '\\u' + theUnicode;
        unicodeString += theUnicode;
    }
    return unicodeString;
}
— ダルタニャンエバーグリーンバルボサ
ソース
0

読み取り専用プロパティを使用することもできますkey。それはまたshift等のような特別なキーを尊重し、IE9によってサポートされます。

印刷できない文字または特殊文字が押されると、値はまたはのような定義済みのキー値の'Shift'いずれかになり'Multiply'ます。

  • キーボード     event.key
  • X             -> 'x'
  • Shift+ X ->'X'
  • F5            -> 'F5'
— キムカーン
ソース
-2

このリンクを参照してください。 キーを押してキーコードを取得し、キーコードの文字値を取得します

$('input#inp').keyup(function(e){
   $(this).val(String.fromCharCode(e.keyCode)); 
   $('div#output').html('Keycode : ' + e.keyCode);  
});
— user2269057
ソース
1
これは不正解です。ユーザーのキーボードで有効になっている現在の言語は考慮されないため。たとえば、「ф」と入力しても「a」が
— 返され
これは正しくありません。テキストはキーボードのレイアウトに従って変化します
— Arnold Roa
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.