jQuery, JavaScript : Mousetrap.js로 키보드 단축키 처리 : 예제, 구현, 개요

jQuery, JavaScript : Mousetrap.js로 키보드 단축키 처리 : 예제, 구현, 개요

 

Mousetrap.js는 웹 응용 프로그램의 키보드 단축키를 쉽게 설정할 수있는 자바 스크립트 플러그인입니다. 특정 키 푸시에서 실행할 기능을 정의 할 수 있습니다. 단일 키 또는 키 조합 또는 일련의 키로 기능을 설정할 수 있습니다. Mousetrap.js는 github에서 구할 수 있으며 다운로드 할 수 있습니다.

 

 

브라우저 지원

Mousetrap.js는 모든 브라우저에서 사용할 수 있으며 다음에서 사용할 수 있도록 지원됩니다.

• Internet Explorer 6+
• Chrome
• Safari
• Firefox
• Opera

 

 

사용법

다른 Javascript 파일과 마찬가지로 페이지에 파일을 포함시키기 만하면 새로운 Mousetrap 개체가 만들어집니다.

<script src="./js/mousetrap.js"></script>

 

페이지에 mousetrap.js 파일을 포함 시키면 키보드 단축키를 적용하는 데 사용할 Mousetrap이라는 새 Javascript 객체가 생성됩니다. Mousetrap 객체를 사용하려면 다음 코드를 사용하면됩니다.

<script>
Mousetrap.bind(key, function(e) {
     // functionality of key button         
});
</script>

 

 

단일 키

Mousetrap에 사용할 단일 키를 정의하려면 다음 코드를 사용합니다.

Mousetrap.bind('/', function(e) {
    // functionality to run on when pushed the / button.
});

 

 

키들의 조합

저장하려면 ctrl + s 또는 복사하려면 ctrl + c와 같은 키 조합을 정의하려면 mousetrap.js를 사용하면 됩니다.

Mousetrap.bind('ctrl+s', function(e) {
    // functionality to run on the ctrl+s
});

 

동일한 기능을 수행하기 위해 서로 다른 두 가지 키 조합을 사용하려면 쉼표로 구분하여 수행하십시오.

 

/**
 * Save the document for both windows and mac users
 */
Mousetrap.bind(['ctrl+s', 'command+s'], function(e) {
     // Save the document
});

 

 

일련의 키

키 조합과 함께 특정 기능을 실행할 일련의 키를 만들 수 있습니다. 공백으로 구분된 모든 키는 시퀀스로 처리됩니다.

/**
 * Sequence of keys
 */
Mousetrap.bind(['q w e r t y'], function(e) {
     // functionality that will run when you type the word qwerty
});