Skip to content

sj-js/keyman

Repository files navigation

KeyMan

Build Status All Download Release License

Getting Started

  1. 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();
  2. 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
        }
    });
  3. 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>