KeyboardJS는 브라우저에서 사용하기 위한 라이브러리입니다 (node.js 호환 가능). 개발자가 키 바인딩을 쉽게 설정할 수 있습니다. 키 콤보를 사용하여 복잡한 바인딩을 설정하십시오.

KeyboardJS는 컨텍스트도 제공합니다. 컨텍스트는 단일 페이지 응용 프로그램에 적합합니다. 바인딩을 사용하여 응용 프로그램의 다양한 부분으로 바인딩 할 수 있습니다.

https://github.com/RobertWHurst/KeyboardJS 

즉시 사용 가능한 키보드 JS는 미국 키보드 로캘을 사용합니다. 다른 유형의 키보드에 대한 지원이 필요한 경우 KeyboardJS는 사용자 정의 로케일 지원을 제공하므로 필요에 맞는 로케일로 작성할 수 있습니다.

KeyboardJS는 NPM 모듈로 제공됩니다. webpack과 같은 빌드 시스템을 사용하지 않는 경우 이 리포지토리의 dist 폴더에서 keyboard.js 또는 keyboard.min.js를 스크립트 태그를 통해 프로젝트에 추가하기 만하면 됩니다.

npm install keyboardjs

모든 키 이름은 ./locales/us.js에 있습니다.

바인딩 설정은 쉽습니다.

keyboardJS.bind('a', (e) => {
  console.log('a is pressed');
});
keyboardJS.bind('a + b', (e) => {
  console.log('a and b is pressed');
});
keyboardJS.bind('a + b > c', (e) => {
  console.log('a and b then c is pressed');
});
keyboardJS.bind(['a + b > c', 'z + y > z'], (e) => {
  console.log('a and b then c or z and y then z is pressed');
});
keyboardJS.bind('', (e) => {
  console.log('any key was pressed');
});
//alt, shift, ctrl, etc must be lowercase
keyboardJS.bind('alt + shift > a', (e) => {
  console.log('alt, shift and a is pressed');
});

// keyboardJS.bind === keyboardJS.on === keyboardJS.addListener

keydown vs a keyup

keyboardJS.bind('a', (e) => {
  console.log('a is pressed');
}, (e) => {
  console.log('a is released');
});
keyboardJS.bind('a', null, (e) => {
  console.log('a is released');
});

Prevent keydown repeat

keyboardJS.bind('a', (e) => {
  // this will run once even if a is held
  e.preventRepeat();
  console.log('a is pressed');
});

Unbind things

keyboardJS.unbind('a', previouslyBoundHandler);
// keyboardJS.unbind === keyboardJS.off === keyboardJS.removeListener

Using contexts

// these will execute in all contexts
  keyboardJS.bind('a', (e) => {});
  keyboardJS.bind('b', (e) => {});
  keyboardJS.bind('c', (e) => {});

  // these will execute in the index context
  keyboardJS.setContext('index');
  keyboardJS.bind('1', (e) => {});
  keyboardJS.bind('2', (e) => {});
  keyboardJS.bind('3', (e) => {});

  // these will execute in the foo context
  keyboardJS.setContext('foo');
  keyboardJS.bind('x', (e) => {});
  keyboardJS.bind('y', (e) => {});
  keyboardJS.bind('z', (e) => {});

  // if we have a router we can activate these contexts when appropriate
  myRouter.on('/', (e) => {
    keyboardJS.setContext('index');
  });
  myRouter.on('/foo', (e) => {
    keyboardJS.setContext('foo');
  });

  // you can always figure out your context too
  const contextName = keyboardJS.getContext();

  // you can also set up handlers for a context without losing the current context
  keyboardJS.withContext('bar', ()  =>{
    // these will execute in the bar context
    keyboardJS.bind('7', (e) => {});
    keyboardJS.bind('8', (e) => {});
    keyboardJS.bind('9', (e) => {});
  });

pause, resume, and reset

// the keyboard will no longer trigger bindings
keyboardJS.pause();

// the keyboard will once again trigger bindings
keyboardJS.resume();

// all active bindings will released and unbound,
// pressed keys will be cleared
keyboardJS.reset();

pressKey, releaseKey, and releaseAllKeys

// pressKey
keyboardJS.pressKey('a');
// or
keyboardJS.pressKey(65);

// releaseKey
keyboardJS.releaseKey('a');
// or
keyboardJS.releaseKey(65);

// releaseAllKeys
keyboardJS.releaseAllKeys();

watch and stop

// bind to the window and document in the current window
keyboardJS.watch();

// or pass your own window and document
keyboardJS.watch(myDoc);
keyboardJS.watch(myWin, myDoc);

// or scope to a specific element
keyboardJS.watch(myForm);
keyboardJS.watch(myWin, myForm);

// detach KeyboardJS from the window and document/element
keyboardJS.stop();