WordPress | キーボード押下時にJavaScriptを実行する方法

WordPress

2022.10.312022.09.18

WordPressでキーボード押下時にJavaScriptを実行する方法を説明する。

結論

「カスタムHTML」ブロックに以下を記述する。

<script>
document.onkeydown = function(e) {
  キー押下時に実行したいコード
}
</script>

以下の書き方でもOK。

<script>
document.addEventListener('keydown', keyEvent);
function keyEvent(e) {
  キー押下時に実行したいコード
}
</script>

具体例

→/←/↑/↓キーを押したときにalertを出すコードを記述した。実際にこのページにはこのコードが記述されているので、→/←/↑/↓キーを押すとalertが出る。

<script>
document.onkeydown = function(e) {
  if (e.key == 'ArrowRight') {
    alert("「→」キーを押しましたね・・・");
  }
  if (e.key == 'ArrowLeft') {
    alert("「←」キーを押しましたね・・・");
  }
  if (e.key == 'ArrowUp') {
    alert("「↑」キーを押しましたね・・・");
    e.returnValue = false;  // ※
  }
  if (e.key == 'ArrowDown') {
    alert("「↓」キーを押しましたね・・・");
    e.returnValue = false;  // ※
  }
}
</script>

※↑/↓キーを押した場合はalertが出た後にページスクロールしないように e.returnValue = false; でキー操作を無効化している。