デバイスに共通した操作の実装のサンプル

「実行」する操作の検出例

良い例:アクションが定義されている要素を使う

「Click!」と書かれたボタンを実行するとブラウザーのコンソールに「clickイベントを検出しました」と表示されます。

この例は、どの入力デバイスでも実行できます。

悪い例:div要素で済ませてしまう

「Click!」というテキストをクリックするとブラウザーのコンソールに「clickイベントを検出しました」と表示されます。

これらの例は、マウスのクリックやタッチディスプレイでのタップでしか実行できず、キーボードなどで実行できない問題があります。

Click!
Click!

「入力」する操作を検出する例

inputイベントで検出する例

テキスト入力欄(座右の銘)を編集してください。この例ではマウスを使ったコピーペーストやスペル修正、音声入力などを試してみてください。

キーボードでテキスト入力欄の内容を変更した場合、ブラウザーのコンソールに「keydownイベントを検出しました」と「inputイベントを検出しました」が表示されます。一方、キーボード以外でテキスト入力欄(座右の銘)の内容を変更した場合、「inputイベントを検出しました」は表示されますが、「keydownイベントを検出しました」は表示されません。

押されたキーの判定

テキスト入力欄(座右の銘)を編集してください。この例ではキーボードを使って内容を変更してみてください。

キーボードでテキスト入力欄の内容を変更した場合、ブラウザーのコンソールに「(数字)が押されました」と表示されます。この数字(KeyboardEvent.keyCode)はキーボードで押されたキーに対応します。

ブラウザーのコンソールに表示される内容