> 웹 프론트엔드 > JS 튜토리얼 > 키보드 이벤트_javascript 기술을 처리하기 위한 Kibo Javascript 도구 라이브러리

키보드 이벤트_javascript 기술을 처리하기 위한 Kibo Javascript 도구 라이브러리

WBOY
풀어 주다: 2016-05-16 18:00:15
원래의
1182명이 탐색했습니다.

시작하기
Kibo는 어떤 것에도 의존하지 않습니다. HTML 코드에 넣으면 됩니다.

코드 복사 코드는 다음과 같습니다.



다운로드kibo.js
Kibo 만들기 객체 인스턴스 및 이벤트 리스너가 설정됩니다.
코드 복사 코드는 다음과 같습니다.

var k = new Kibo();

Kibo 객체의 생성자에는 선택적 매개변수(이벤트를 수신하기 위해 지정하는 HTML 요소)가 있습니다. 입력, 텍스트 영역 또는 선택이 가능하며 기본값은 window.document입니다.

구문 및 사용법
이 도구 라이브러리는 down과 up의 두 가지 간단한 메서드를 제공합니다. 둘 다 키 또는 여러 키의 조합 또는 와일드카드와 일치하는 키가 호출되는 함수라는 두 가지 매개변수를 받습니다. 이벤트가 발생합니다. 두 메서드 모두 체인으로 호출할 수 있습니다.

키조합이란 컨트롤키와 문자키의 조합, 또는 단순히 하나 이상의 컨트롤키를 의미합니다. 단일 키 또는 배열의 여러 키 조합을 두 메서드 모두에 전달할 수 있습니다.

함수가 호출되면 이벤트가 이 함수로 전달됩니다. 이벤트에 아무런 조치가 없으면 무시하세요. 함수가 false를 반환하면 이벤트의 기본 작업이 차단됩니다.

Kibo는 마지막 키보드 이벤트를 생성한 키를 쿼리하는 lastKey 메서드를 제공합니다. 마지막으로 누른 키가 지원되지 않는 키인 경우 메서드는 정의되지 않은 키 이름을 반환합니다. 또한 lastKey를 사용하여 특정 기능 키를 눌렀는지 확인할 수도 있습니다. 이는 true 또는 false를 반환합니다.

지원되는 키
Kibo는 다음 키를 지원하며 키 이름은 철자 시 대소문자를 구분하지 않습니다.

컨트롤 키 Shift, Ctrl, Alt

문자 키 a부터 z까지

0부터 9까지의 숫자 키

f1부터 f12까지의 기능 키

왼쪽, 위, 오른쪽, 아래 방향 키

Enter , esc, space, backspace, delete, insert, tab, page_up, page_down, home, end, caps_lock, num_lock

와일드카드 any, any arrow, any number, any letter, any f


var k = new Kibo();

단일 또는 다중 키 조합
코드 복사 코드는 다음과 같습니다:

k.down(['up', 'down'], function() {
console.log('위 또는 아래 화살표 키 누름');
}).up('tab', function() {
console.log('TAB 키 해제');
})

컨트롤 키가 포함된 키 조합
코드 복사 코드는 다음과 같습니다.

function handler() {
console .log(' 마지막 키: ' k.lastKey());

k.down(['shift q', 'ctrl alt x'], handler)

와일드카드

코드 복사 코드는 다음과 같습니다.
k.down( ['모든 문자', '모든 숫자'], function() {
console.log('문자 또는 숫자 키를 눌렀습니다.')
console.log('shift 키였습니다' (k.lastKey(' Shift') ? '' : ' 안 됨') ' 눌림');

k.up('any', function() {
console.log('키가 해제됨) ');
} ;
k.down('f5', function() { return false; });

라이센스
Kibo는 MIT 라이센스에 따라 출시됩니다.
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿