목차
keydown() 예제 - 글자 입력 때마다 배경색 변경.
keydown() 정의
keydown() 구문
keydown() 예제 - 사용자가 누른 키보드 키 번호 표시
keydown() 예제 - 글자 입력 때마다 배경색 변경.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").keydown (function(){
$("input").css("background-color", "yellow");
});
$("input").keyup(function(){
$("input").css("background-color", "tomato");
});
});
</script>
아이디: <input type="text">
결과보기
keydown() 정의
keydown 이벤트는 키보드 키가 밑으로 내려갈 때 이벤트 발생.
※ keydown() 메서드는 아래 2가지 작업 가능.
① keydown 이벤트 촉발.
② keydown 이벤트에 함수 부착.
※ 내려간 키보드 키 확인: event .which 속성 이용. (맨 하단 예제)
cf.
keydown() 메서드
키보드 키가 밑으로 내려갈 때 이벤트 발생.
※ 모든 키보드 키가 작동함.
keypress() 메서드
키보드 키가 눌려졌을 때 이벤트 발생.
※ 모든 키보드 키가 작동하는 건 아님. (예: ALT, CTRL, SHIFT, ESC).
※ keypress() 안 먹히는 키보드 키는 keydown()이나 keyup()으로 체크.
keyup() 메서드
키보드 키가 위로 올라갈 때 이벤트 발생.
※ 모든 키보드 키가 작동함.
keydown() 구문
keydown 이벤트 촉발.
$(selector ).keydown()
keydown 이벤트에 함수 부착.
$(selector ).keydown(function )
[매개변수]
function
선택. keydown 이벤트 발생 시 실행할 함수 지정.
keydown() 예제 - 사용자가 누른 키보드 키 번호 표시
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").keydown(function(event ){
$("div").html("Key: " + event .which );
});
});
</script>
이름 입력: <input type="text">
<div />
결과보기
주소 복사
랜덤 이동