onkeypress
키보드 입력시 기존에 있는 값을 가져오는 형태
onkeyup
키보드 입력시 누르고 떼자마자 입력된 모든값을 가져오는 형태
onkeydown
키보드 입력시 누르자마자 직전값을 모두 가져오는 형태
오른쪽 숫자키,상단숫자키 keycode ascii번호가 다름 ( onkeypress는 동일 )
특수키 keycode ascii번호도 인식 ( onkeypress는 불가 )
=>새로고침방지,스크린샷방지,id입력시 spacebar 사용금지 등..에 사용
⚡ 키보드 이벤트 핸들링
<body> <input type="text" id="mid" onkeypress="key1(this.value)"><br> <input type="text" id="mid2" onkeyup="key2(this.value)"><br> <input type="text" id="mid3" onkeydown="key3(this.value)"> </body> <script type="text/javascript"> function key1(a){ //onkeypress var ascii = window.event.keyCode; if(ascii < 48 || ascii > 57){ document.getElementById("mid").value=""; //마지막에 누른 key값은 input에 남아있음 - 완전 초기화는 불가능 alert("휴대폰 번호는 숫자만 입력 가능합니다."); } } function key2(b){ //onkeyup console.log(b) } function key3(c){ //onkeydown var ascii = window.event.keyCode; if(ascii == 116){ //f5 막기 alert("새로고침은 사용하실 수 없습니다"); event.keyCode = 0; event.returnValue = false; }else if(ascii == 13){ alert("enter키 작동금지!"); return false; } } </script>
'CLASS > HTLML,CSS,JS' 카테고리의 다른 글
| #10-1 / js중급 - 자식노드핸들링,시간함수 (0) | 2024.06.11 |
|---|---|
| #9 / html include (by php) (0) | 2024.05.30 |
| #8 / Js-Node,forEach (0) | 2024.05.14 |
| #7-4 / ECMA Script(ES5, ES6) (0) | 2024.04.26 |
| #7-3 / HTML+CSS+JS 외부 로드 및 각종 핸들링 (0) | 2024.04.26 |