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

2020.07.20
javascript
mousetrap

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

1. 環境
2. mousetrap使用例

環境

OS windows10 pro 64bit

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>

<!DOCTYPE html>

<head>

</head>

<body>

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を利用するとキー入力のイベントを簡単に取得することが可能となります。

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

環境

mousetrap使用例

dockerを使ってオンラインストレージ「Pydio Cells」をインストールする 2020.07.20

java 「Apache Commons Lang」の「StringUtils」を利用してnullと空文字チェックを行う 2020.07.20