반응형
텍스트 필드에 키보드로 입력 시 사용자가 어느 키를 눌렀는지 확인하고 싶을 때 사용하는
이벤트에 대해서 알아보자.
▶ keypress 이벤트
keypress(handler)
→ 이 메서드는 키보드로 텍스트 필드에 입력할 때 handler가 실행된다. keydown 이벤트와 차이점 있다.
아래 설명 참조
$('텍스트필드 선택자').keypress(function(e){
console.log(e.keyCode);
});keypress()는 지정한 엘리먼트에 이벤트 핸들러를 연결하여 사용자가 키보드의 키를 누르면 이벤트 핸들러가 실행이 된다. 이 keypress() 메서드는 keydown과 차이점은 특수 키 (Shift, Ctrl, Alt 등등) 특수키는 응답을 안 한다.
▶ keydown 이벤트
keydown(handler)
→ 이 메서드는 키보드로 텍스트 필드에 입력할 때 handler가 실행된다. keypress 이벤트와 차이점 있다.
아래 설명 참조
$('텍스트필드 선택자').keydown(function(e){
console.log(e.keyCode);
});keydown() 메서드는 키보드를 눌렀을 때 실행된다. keypress() 메서드와 차이점은 특수 키에도 응답을 한다.
▶ keyup 이벤트
keyup(handler)
→ 이 메서드는 키보드로 텍스트 필드에 입력 후 키보드에 손을 놓았을 때 handler 가 실행된다.
$('텍스트필드 선택자').keyup(function(e){
console.log(e.keyCode);
});keyup() 메서드는 keydown() 메서드와 반대로 키를 눌렀다가 떼었을 때 handler를 호출하기 때문에,
텍스트 유효성 검사 시 keyup과 keydown 메서드를 이용하면 될 것 같다.
테스트 코드
예)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<title>JS Bin</title>
<script>
$(document).ready(function(){
$('#input-box-1').keypress(function(e){
$('#keyValue').text('keypress : '+e.keyCode);
});
$('#input-box-2').keydown(function(e){
$('#keyValue').text('keydown : '+e.keyCode);
});
$('#input-box-3').keyup(function(e){
$('#keyValue').text('keyup : '+e.keyCode);
});
});
</script>
</head>
<body>
keypress : <input id="input-box-1"><br>
keydown : <input id="input-box-2"><br>
keyup : <input id="input-box-3"><br>
누른 키 : <p id="keyValue"></p>
</body>
</html>
위 코드로 테스트를 해보면 아래 무엇이 찍히는지 테스트를 진행할 수 있다.
반응형
'web 언어 > jQuery' 카테고리의 다른 글
| jQuery - 태그 삽입, 태그 넣기 tag insert (0) | 2022.03.10 |
|---|---|
| jQuery - 선택자 :eq() 인덱스 사용자 지정 선택기 (0) | 2022.03.07 |
| jQuery - 정의한 CSS 클래스 토글 이벤트 (0) | 2022.03.06 |
| jQuery - 버튼에 호버(hover) 효과 이벤트, 적용하기 (0) | 2022.03.06 |
| jQuery - 엘리먼트가 focus(포커스)를 얻고 잃을 때 이벤트 (0) | 2022.03.06 |