KeyboardEvent.getModifierState() - キーの状態
getModifierState()は、KeyboardEventのメソッドです。引数のキーを押しているか否かを返します。
概要
- 名前
- getModifierState
- 所属
- KeyboardEvent
- IDL
boolean getModifierState(DOMString keyArg);
- 仕様書
- https://w3c.github.io/uievents/#dom-keyboardevent-getmodifierstate
説明
引数(keyArg)には、ボタンを表す文字列を指定します。
デモ
KeyboardEvent.getModifierState()のデモです。textarea要素にkeydownイベントを設定しました。shiftキーを押しながら、何かボタンを押してみて下さい。
<!-- このコードは編集できます。 -->
<!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 ) {
var value = event.getModifierState( "Shift" ) ;
// var value = event.getModifierState( "Alt" ) ;
// var value = event.getModifierState( "Control" ) ;
if ( value !== lastValue ) {
console.log( value ) ;
resultElement.innerHTML = "" ;
resultElement.appendChild( new Text( "currentTarget: " + event.currentTarget + "(#" + event.currentTarget.id + ")" + "\n" ) ) ;
resultElement.appendChild( new Text( "getModifierState(): " + value ) ) ;
}
lastValue = value ;
} ;
var lastValue ;
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 |
---|---|---|---|---|---|---|---|
● 30+ | ● 15+ | ● 10+ | ● | ● 9+ | ● 17+ | ● 10.0+ | ● 4.4+ |
関連記事
- KeyboardEvent
- KeyboardEventは、キーボード操作に関連するイベントで取り扱われるインターフェイスです。
- KeyboardEvent.metaKey
- metaKeyは、KeyboardEventのプロパティです。イベント発生時にmetaキーが押されているか否かを返します。WindowsならWindowsキー、MacならCommandキーがこれにあたります。
- KeyboardEvent.repeat
- repeatは、KeyboardEventのプロパティです。イベントが、ボタンの押しっ放しによる繰り返し入力により発生したか否かを返します。
- KeyboardEvent.shiftKey
- shiftKeyは、KeyboardEventのプロパティです。イベント発生時にShiftキーが押されているか否かを返します。