shortcut.js/example.html at master · blainekasten/shortcut.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<head>
  <!--<script src='dist/KeyHolder.js'></script>-->
  <meta http-equiv="X-UA-Compatible" content="IE=8">
  <meta charset="UTF-8">
  <script>
    window.shortcut = 'hello';
  </script>
  <script src='dist/shortcut.js'></script>
</head>

<h3> SHORTCUT </h3>
<label for='phone'>Phone field</label>
<div>
  <span>
    <input id='phone' />
  </span>
</div>

<p> This page has keyboard shortcuts via the shorcut library. </p>
<p> It is instantiated by <pre><code>shortcut('mod a', DOMNode).bindsTo(function(){...});</code></pre>
<p> Test out pressing shift + 1 anywhere in the window. </p>
<p> or mod + a in the phone field. </p>

<script>
  var phonefn = function(e){
    el = e.target || e.srcElement;
    el.value = "You did it!";
  };

  var windowfn = function(e){
    console.log('Congrats! You pressed shift 1 somewhere in the window.');
  };

  var log = function(e) {
    console.log('stopped propagation, congrats shouldnt appear');
  }

  shortcut('mod a', document.getElementById('phone')).bindsTo(phonefn).preventDefault();
  shortcut('up', document.getElementById('phone')).stopPropagation().bindsTo(log);
  shortcut('up', document.body).bindsTo(windowfn);

  shortcut('up', document.getElementById('phone')).trigger();
</script>