KeyMan
⌨
- 쉽게 Key Event를 다룰 수 있습니다.
- 동시에 1개 이상의 키를 누를 때 발생하는
Shorcut와 순차적으로 키를 누를 때 발생하는Command로 나뉩니다. -
✨ Source: https://github.com/sj-js/keyman -
✨ Document: https://sj-js.github.io/sj-js/keyman
Getting Started
-
Load
- Browser
<script src="https://cdn.jsdelivr.net/npm/@sj-js/crossman/dist/js/crossman.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@sj-js/keyman/dist/js/keyman.min.js"></script> <script> var keyman = new KeyMan(); </script>
- ES6+
npm i @sj-js/keyman
const KeyMan = require('@sj-js/keyman'); const keyman = new KeyMan();
- Browser
-
Shortcut 등록
keyman.addShortcut({ name:'develop-tool', keys: ['ctrl', 'shift'], keydown: function(event){ //Something to do when shorcut keys are down }, keyup: function(event){ //Something to do when shorcut keys are up } });
-
Simple Example
<!DOCTYPE html> <HTML> <head> <script src="https://cdn.jsdelivr.net/npm/@sj-js/crossman/dist/js/crossman.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@sj-js/keyman/dist/js/keyman.min.js"></script> <script> var keyman = new KeyMan(); </script> <style> * { margin:0; cursor:pointer; } div:focus { background-color: Aqua; } </style> </head> <script> keyman.addShortcut({ name:'develop-tool', keys: ['ctrl', 'shift'], keydown: function(event){ document.getElementById('tester').innerHTML = 'KEY ON'; }, keyup: function(event){ document.getElementById('tester').innerHTML = 'KEY OFF'; } }); keyman.addShortcut({ name:'copy-then', keys: ['ctrl', 'c'], keydown: function(event){ document.getElementById('tester').innerHTML = 'COPY ON'; }, keyup: function(event){ document.getElementById('tester').innerHTML = 'COPY AND..'; } }); </script> <body> <div tabindex="0" style="width:500px; height:500px; border:1px solid black;"> Click here and Test key [Ctrl] + [Shift] <div id="tester" style="color:#FF832C; font-weight:bold;"></div> </div> </body> </HTML>