KeyboardEvent.key - ボタンの値
keyは、KeyboardEventのプロパティです。イベントを発生させたボタンの値を返します。
概要
- 名前
- key
- 所属
- KeyboardEvent
- IDL
readonly attribute DOMString key;
- 仕様書
- https://w3c.github.io/uievents/#dom-keyboardevent-key
説明
ボタンの値を返します。
デモ
KeyboardEvent.keyのデモです。textarea要素にkeydownイベントを設定しました。何かキーボードのボタンを押してみて下さい。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
textarea#hoge {
width: 80% ;
min-height: 140px ;
}
div#result {
white-space: pre-wrap ;
}
</style>
</head>
<body>
<textarea id="hoge"></textarea>
<hr>
<div id="result"></div>
<script>
/** try it! **/
var callbackFn = function ( event ) {
console.log( event ) ;
resultElement.innerHTML = "" ;
resultElement.appendChild( new Text( "currentTarget: " + event.currentTarget + "(#" + event.currentTarget.id + ")" + "\n" ) ) ;
resultElement.appendChild( new Text( "key: " + event.key + "\n" ) ) ;
resultElement.appendChild( new Text( "code: " + event.code + "\n" ) ) ;
} ;
document.getElementById( "hoge" ).addEventListener( "keydown", callbackFn ) ;
/** try it! **/
var resultElement = document.getElementById( "result" ) ;
</script>
</body>
</html>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● 51+ | ● 23+ | ● 10+ | ● | ● 9+ | ● 38+ | ● 10.0+ | × |
関連記事
- KeyboardEvent.keyCode
- keyCodeは、KeyboardEventのプロパティです。イベントを発生させたボタンに対応するコードを返します。
- KeyboardEvent()
- KeyboardEvent()は、KeyboardEventのコンストラクタです。新しいオブジェクトを作成します。
- KeyboardEvent.DOM_KEY_LOCATION_LEFT
- DOM_KEY_LOCATION_LEFTは、KeyboardEventの定数です。0x01を返します。この値は、キーボードにおけるボタンの位置が左側であることを表します。
- KeyboardEvent.code
- codeは、KeyboardEventのプロパティです。イベントを発生させたボタンに対応するコードを文字列で返します。