NEW ARTICLE
Error: Failed to lookup view ‘X’ in views directory の解決方法
  1. HOME
  2. javascript
  3. javascript mousetrapを使用してブラウザ上でのキー入力を検知する

javascript mousetrapを使用してブラウザ上でのキー入力を検知する

javascript mousetrapを使用してブラウザ上でのキー入力を検知する

javascriptのライブラリである「mousetrap」を使用してブラウザ上でのキー入力を検知するサンプルコードとなります。

目次

環境

  • OS windows10 pro 64bit
  • ブラウザ chrome 102.0.5005.63
Javascript サンプル集はこちら

mousetrap使用例

下記のコードはmousetrapを利用したサンプルコードとなります。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>タイトル</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.5/mousetrap.min.js"></script>
</head>

<body>
  <script>
    Mousetrap.bind('esc', function () {
      alert('escapeが押下されました');
    });

    Mousetrap.bind('shift+a', function () {
      alert("shift+a が押下されました");
    });

    Mousetrap.bind('ctrl+q', function () {
      alert('ctrl+q が押下されました');
    });

  </script>
</body>

</html>

実行結果の通り、mousetrapを利用するとキー入力のイベントを簡単に取得することが可能となります。