[JQuery] keyboard Event

 

지난번 살펴봤던 마우스 이벤트과 유사하게 키보드 이벤트를 받아서 사용할 수 있습니다.

기존에 Javascript에서 많이 사용하던 기능으로 JQuery 와 사용할 때 크게 다르지 않습니다.

 

Javascript 에서는 document.onkeydown 으로 항상 키 입력을 받게 설정한 다음, 함수와 연결하는 구조로 사용하였습니다.

 

<script>
document.onkeydown = eventKeydown;

function eventKeydown() {

}
</script>

 

아래와 같이 항상 키 입력을 받는 상태에서 키 이벤트(116번) 이 들어왔을 때, 특정한 동작을 수행하라는 함수과 같이 사용되었습니다. (참고로 키 116번은 F5 키를 가리킵니다.)

 

function eventKeydown() {
    if ((event.keyCode == 116)  {
         // 특정한 동작 수행
    }
}

 

 

1. 샘플 예제

 

테스트를 하기 위해 아래와 같이 예제를 만들었습니다.

 

<html>
<head>
    <title>에프에이리눅스</title>
    <script src="jquery-1.9.1.min.js"></script>
</head>
<body>
    <input id="target" type="text" />
</body>
</html>

<script>
$(function() {
    // 스크립트를 넣을 부분
});
</script>

 

 

2. keydown

 

html 엘리멘트 중에 입력을 받을 일이 있을 때 input을 사용합니다.

 

<input id="target" type="text" />

 

위의 input 안에서 키 이벤트가 발생할 때 아래와 같이 작성해주면 됩니다.

 

$('#target').keydown(function() {
    alert("keydown() 이벤트");
});

 

위에서는 단순하게 경고창만 띄웠지만, input 안에 길이를 체크해서 내용이 비었을 때, 경고창을 띄우는 형식으로 바꿔줄 수 있습니다.

 

 

3. keypress()

 

keydown()이 키를 누르는 것을 나타낸다면, 실제 어떤 키가 눌렸는지에 관한 키보드 이벤트는 keypress()를 사용합니다.

 

keypress는 키보드 입력을 감지하고 주기적으로 확인을 할 수 있습니다.

글자가 입력되거나 움직일 때마다 이벤트가 발생합니다.

 

예를 들어 숫자만 입력해야하는 입력란에서 문자가 들어왔을 때, 경고나 입력되지 않게 할 수 있습니다.

 

$('#target').keypress(function() {
    alert("keypress() 이벤트");
});

 

 

4. keyup()

 

keydown() 이 처음 키를 누르는 시작이고, keypress()가 중간중간 체크를 하는 것이면

keyup()는 키를 눌렀다가 뗀 마지막 상태를 나타냅니다.

 

$('#target').keyup(function() {
    alert("keyup() 이벤트");
});

 

위의 keydown에서 예로 설명드렸던, 빈칸 체크등은 keyup에서 구현하는게 더 좋을거 같습니다.

 

 

^ㅇ^!!!

 

요즘에 키보드 이벤트가 가장 많이 사용되는 곳은 회원 가입 항목에서 많이 볼 수 있을거 같습니다.

 

참고로 누르는 키에 대한 정보를 알고자 한다면 아래와 같이 확인할 수 있습니다.

 

console.log(event.keyIdentifier);

 

크롬 브라우저를 통해서 console.log() 메시지를 통해 주로 확인하는 편입니다.

 
이 게시물을...