JavaScript - スペースキーの入力イベント
JavaScriptでスペースキーの入力イベントをトリガーにしたイベントを実装する簡単なコード例を紹介しています。
HTMLには、スペースキーの入力をトリガーとする対象として<div>タグにid名「target」を指定しています。
「tabindex」を指定する事でフォーカスを可能にし、キーの入力イベントを実行可能にします。
コード例では<div>タグを対象にしていますので「tabindex」を利用していますが、テキスト入力フォームやdocument全体を対象とする場合は不要です。
<div id="target" tabindex="0">スペースキーを押して下さい</div>
CSSでは、イベントの対象とするためのサイズを設定しています。
疑似クラス「focus」にて、要素をクリックしたときのフォーカス時に表示するアウトラインを指定しています。
#target {
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
padding: 10px;
color: white;
width: 250px;
height: 250px;
border-radius: 50%;
text-align: center;
cursor: pointer;
background-color: #000080;
}
/* フォーカス時の枠線を指定 */
#target:focus {
outline: 2px solid #000fff;
}
対象とする要素はquerySelector()
で指定、addEventListener()
で「keydown」を指定してキーが押された時をトリガーにしたイベントを設定します。
キー入力イベント内でキーコードがスペースキー「32」かどうかを判別、イベントを実装しています。
「keyup」にて同様にイベントを実装し、スペースキーが離された時に要素に表示している内容を削除しています。
// 出力エリア
let target = document.querySelector('#target');
target.addEventListener('keydown', () => {
// デフォルトの処理を実行しない
event.preventDefault();
// スペースキーが押されたかどうか
if (event.keyCode === 32) {
// ターゲット要素内に
target.innerHTML = 'スペースキーが押されています';
}
});
target.addEventListener('keyup', () => {
// スペースキーが離されたかどうか
if (event.keyCode === 32) {
// ターゲットの表示を削除
target.innerHTML = 'スペースキーを押して下さい';
}
});
![JavaScript - スペースキーの入力イベント](/images/javascript/space-key-input-event/image-ja.png)