학원/JS
11/09 39-1 [JS] KeyboardEvent
도원결의
2022. 11. 9. 18:14
키보드 이벤트 : 텍스트상자( <input type="text"~ > 또는 <input type="password" ~>등 )
입력상자에서 적용되는 이벤트
keydown:"모든 키"를 누를 때 발생하는 이벤트
keyup:키보드를 뗄 때 발생하는 이벤트
keypress:"문자 키"를 누를 때 발생하는 이벤트(방향키나 DELETE키,한글 누를 때는 발생안함-FIREFOX에서만 적용안됨)
받은 HTML
<fieldset>
<legend>key이벤트 테스트</legend>
keydown: <input type="text" />
keyup: <input type="text" onkeyup="fnKeyHandler(1)" />
keypress: <input type="text" onkeypress="fnKeyHandler(2)" />
</fieldset>
<fieldset>
<legend>주민번호</legend>
<input type="text" size="6" maxlength="6" onkeyup="fnSetFocus(this)" />
-
<input type="text" size="7" maxlength="7" id="ssn" />
</fieldset>
이벤트 객체 확인 먼저 해봄
//확인용 코드
window.addEventListener('DOMContentLoaded',function(){
var input = document,querySelector('input');
input.onkeydown = function(e){
console.log('keydown이벤트 발생');
console.log('이벤트명:',e.type);
console.log('e.key:',e.key);
console.log('e.keyCode:',e.keyCode);
console.log('e.code:',e.code);
console.log('ENTER' === e.key.toUpperCase()); // 엔터일때
console.log( 13 === e.keyCode); // 이게 더 낫겟음
if(13 === e.keyCode){ // this는 e.target과 같다.
console.log('입력한 문자열:',this.value); // 이거나 input.value 랑 같음 !
}
};
});===> 키보드 5 입력 시 출력
// 보낸 HTML파일에서 보면 같은 함수인데 인자만 다르게 해서 리턴값이 다르게 나오게 함
function fnKeyHandler(flag){
switch(flag){ // swich문으로 나눠줌
case 1: console.log('keyup 이벤트 발생'); break; //키보드 뗐을 때
default : console.log('keypress이벤트 발생'); //키보드 누르고 있을 때
}
}
//주민번호 앞에 6자리 누르면 바로 뒷 자리 입력할 수 있기 focus 이동 하기 !!
function fnSetFocus(obj){
if(obj.value.length == 6 ) document.querySelector('ssn').focus()
}