どの文字キーが押されたかを知る方法は?


118

純粋なJavascriptで、ブラウザ間で互換性のある方法でどの文字キーが押されたかを知りたいのですが。


1
「どのキー押されたのか」という質問に対するこれらすべての回答ではありませんか?実行中に、JavaScriptコードがキーボードのキーが現在押されているかどうかを知りたい場合はどうなりますか?
mwardm 2016年

2
event.key押されたcharが直接表示されます
Gibolt

回答:


158

「クリア」JavaScript:

<script type="text/javascript">
  function myKeyPress(e){
    var keynum;

    if(window.event) { // IE                    
      keynum = e.keyCode;
    } else if(e.which){ // Netscape/Firefox/Opera                   
      keynum = e.which;
    }

    alert(String.fromCharCode(keynum));
  }
</script>

<form>
  <input type="text" onkeypress="return myKeyPress(event)" />
</form>

jQuery:

$(document).keypress(function(event){
  alert(String.fromCharCode(event.which)); 
});

6
これはアルファベット文字では問題なく動作しますが、ドット/ブラケットやその他の印刷上の記号についてはどうですか?
VoVaVc 2014年

6
@VoVaVc:それもそれらのために働きます。重要な事は、使用しているkeypressのではなく、あなたの文字コードを与えるイベント、keyupまたはkeydownあなたのキーコードを与えるを。
Tim Down

2
@aljgom、e.keyまだ完全なブラウザーサポートがありません。
アンディマーサー

1
!のように、Shiftキーを押して作成する必要のあるシンボルでは機能しません。
カーティス

5
:@AndyMercerキーは、現在すべての主要なブラウザでサポートされていdeveloper.mozilla.org/en-US/docs/Web/API/KeyboardEvent/...
レイ

34

ここにはこの質問の100万の重複がありますが、とにかくここに再び行きます:

document.onkeypress = function(evt) {
    evt = evt || window.event;
    var charCode = evt.keyCode || evt.which;
    var charStr = String.fromCharCode(charCode);
    alert(charStr);
};

私が見た主要なイベントに関する最良のリファレンスはhttp://unixpapa.com/js/key.htmlです。


23

より新しく、よりクリーン:を使用しますevent.key。これ以上の任意の番号コードはありません!

注:古いプロパティ(.keyCodeおよび.which)は非推奨です。

node.addEventListener('keydown', function(event) {
    const key = event.key; // "a", "1", "Shift", etc.
});

単一の文字のみが入力されていることを確認する場合は、をチェックするkey.length === 1か、それが期待する文字の1つであることを確認してください。

Mozillaドキュメント

サポートされているブラウザ


これはnode.js用ですか?
メリーボット

いいえ、ノードは単にDOM要素を意味します。Node.jsがUIに接続している場合は、それが機能すると思います
Gibolt

一部のモバイルデバイスのキーダウンが機能せず、未定義が返される
Angelotti

4

試してください:

<table>
<tr><td>Key:</td><td id="key"></td></tr>
<tr><td>Key Code:</td><td id="keyCode"></td></tr>
<tr><td>Event Code:</td><td id="eventCode"></td></tr>
</table>
<script type="text/javascript">
window.addEventListener("keydown", function (e) {
  //tested in IE/Chrome/Firefox
  document.getElementById("key").innerHTML = e.key;
  document.getElementById("keyCode").innerHTML = e.keyCode;
  document.getElementById("eventCode").innerHTML = e.code;
})
</script>

*注:これは「コードスニペットの実行」で機能します

このウェブサイトは上記の私のコードと同じです:Keycode.info


1

これを使用してください:

function onKeyPress(evt){
  evt = (evt) ? evt : (window.event) ? event : null;
  if (evt)
  {
    var charCode = (evt.charCode) ? evt.charCode :((evt.keyCode) ? evt.keyCode :((evt.which) ? evt.which : 0));
    if (charCode == 13) 
        alert('User pressed Enter');
  }
}

1
**check this out** 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(document).keypress(function(e)
        {

            var keynum;
            if(window.event)
            { // IE                 
                keynum = e.keyCode;
            }
                else if(e.which)
                    { 
                    // Netscape/Firefox/Opera                   
                    keynum = e.which;
                    }
                    alert(String.fromCharCode(keynum));
                    var unicode=e.keyCode? e.keyCode : e.charCode;
                    alert(unicode);
        });
});  

</script>
</head>
<body>

<input type="text"></input>
</body>
</html>

1
これは、@ Coyodの2009年の回答のほぼ完全な複製ではありませんか?
クリスFキャロル2015年

1

洗練された方法でこれを行うために私のお気に入りのライブラリの1つはMousetrapです。

さまざまなプラグインが用意されており、そのうちの1つは、record押されたキーのシーケンスを識別できるプラグインです。

例:

<script>
    function recordSequence() {
        Mousetrap.record(function(sequence) {
            // sequence is an array like ['ctrl+k', 'c']
            alert('You pressed: ' + sequence.join(' '));
        });
    }
</script>


<button onclick="recordSequence()">Record</button>

@DanLoweスニペットを追加しました。
dipole_moment 2015年

Uncaught TypeError:Mousetrap.recordは、HTMLButtonElement.onclick(****。html:20)のrecordSequence(****。html:12)の関数ではありません
Irrmich

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.