KeyboardEvent keyCode属性

DOM イベント KeyboardEvent

定義と用法

keyCode属性がトリガー onkeypress イベント のキーのUnicode文字コード、またはトリガー onkeydown または onkeyup イベント のキーのUnicodeキーコード。

二つのコードタイプの違い：

  • 字符コード - ASCII文字を表す数字
  • キーコード - キーボード上の実際のキーを表す数字

これらのタイプは常に同じ意味を指しているとは限りません。例えば、小文字の「w」と大文字の「W」のキーボードコードは同じです（「W」は数字「87」です）、しかし文字コードは異なります（「w」または「W」、つまり「119」または「87」、結果の文字は異なります）- 下記の例を参照して、これについてより深く理解することができます。

ヒント：ユーザーが印刷可能なキー（例えば「a」または「5」）を押しているかどうかを確認するには、onkeypress イベント上でこの属性を使用することをお勧めします。機能キー（例えば「F1」、「CAPS LOCK」または「Home」）を押しているかどうかを確認するには、onkeydown や onkeyup イベントを使用してください。

注記：Firefox では、keyCode プロパティは onkeypress イベントに対して機能しません（0が返されます）。クロスブラウザのソリューションとして、以下を使用してください： which プロパティ例えば、keyCode と一緒に使用する場合：

var x = event.which || event.keyCode;  // which または keyCode を使用するかは、ブラウザのサポートに依存します

ヒント：すべての Unicode 文字の一覧については、以下を参照してください： 完全な Unicode 参考情報

ヒント：Unicode 値を文字に変換するには、以下を使用してください： fromCharCode() メソッド

注記：この属性は読み取り専用です。

注記：keyCode 属性と which 属性は互換性のために提供されています。最新バージョンの DOM イベント規格では、key プロパティを使用することをお勧めしています（利用可能の場合）。

ヒント：「ALT」、「CTRL」、「META」または「SHIFT」キーが押されているかどうかを知りたい場合は、以下を使用してください： altKey、ctrlKey、metaKey または shiftKey 属性。

实例

例子 1

获取按下的键盘按键的 Unicode 值：

var x = event.keyCode;

自分で試してみる

例子 2

使用 onkeypress 和 onkeydown 来演示字符代码与键盘代码之间的区别：

<input type="text" onkeypress="uniCharCode(event)" onkeydown="uniKeyCode(event)"> 
function uniCharCode(event) {
  var char = event.which || event.keyCode;
  document.getElementById("demo").innerHTML = "Unicode CHARACTER code: " + char;
}
function uniKeyCode(event) {
  var key = event.keyCode;
  document.getElementById("demo2").innerHTML = "Unicode KEY code: " + key;
}

キャップロックを使用せずに、キーボード上の "a" キーを押した場合、char と key の結果は次のようになります：

Unicode CHARACTER code: 97
Unicode KEY code: 65

自分で試してみる

例 3

ユーザーが Escape キーを押した場合、テキストを表示します：

<input type="text" onkeydown="myFunction(event)"> 
function myFunction(event) {
  var x = event.keyCode;
  if (x == 27) {  // 27 は ESC キー
    alert("You pressed the Escape key!");
  }
}

自分で試してみる

例 4

Unicode 値を文字に変換（機能キーには適用されません）：

var x = event.keyCode;                // Unicode 値を取得
var y = String.fromCharCode(x);       // 値を文字に変換

自分で試してみる

構文

event.keyCode

技術的詳細

返り値： Unicode 字符コードまたはUnicode キーコードを示す数字値。
DOM バージョン： DOM レベル 2 イベント

ブラウザのサポート

属性 Chrome IE Firefox Safari Opera
keyCode サポート サポート サポート サポート サポート

関連ページ

HTML DOM 参考マニュアル：KeyboardEvent key 属性

HTML DOM 参考マニュアル：KeyboardEvent charCode 属性

HTML DOM 参考マニュアル：KeyboardEvent which 属性

DOM イベント KeyboardEvent