웹페이지
JAVASCRIPT STEP 12 - KeyEvent
IT의 큰손
2023. 4. 21. 15:18
728x90
★ 키 관련 이벤트, KeyEvent
- onkeyXXX
- 포커스를 가지는 태그에서만 발생(텍스트 박스, 체크 박스 등)
- 발생 순서 : keydown > keypress > keyup
- 요즘 키보드 > 연속입력(O)
- event.keyCode : 어떤키가 눌렸는지 알려주는 기능
- 1. onkeydown
- 키를 눌렀을 때 발생
- 문자에 반응하는 이벤트(X) > 어떤 문자가 입력되었는지 중요(X)
- 물리키에 반응하는 이벤트 > 어떤 키를 눌렀는지 중요(O)
- 키보드에 존재하는 모든 키에 반응(****)
- 방금 입력한 문자는 필요없을 때 사용
- 평상 시 키 이벤트 > keydown
- 특별히 누른 키가 관련된 작업 > keyup
txt1.onkeydown = m1;
function m1() {
console.log('keydown');
//event.keyCode : 어떤키가 눌렸는지 알려주는 기능
console.log(event.keyCode);
}
//이 방법이 더 좋은 방법
function m1(evt) {
console.log(evt.keyCode); //표준 방법
}- 2. onkeyup
- 키를 땟을 때 발생
- 방금 입력한 문자가 필요한 경우에 사용
txt1.onkeyup = m2;
function m2() {
//console.log('keyup');
console.log(event.keyCode);
}- 3. onkeypress
- 키를 눌렀을 때 발생
- 문자에 반응하는 이벤트(O)
- 문자가 아닌 나머지 키에는 반응(X)
- 잘 사용 안함.
txt1.onkeypress = m3;
function m3() {
//console.log('keypress');
console.log(event.keyCode);
}- 방향키로 텍스트 박스를 조절
//방향키
//- 좌(37), 상(38), 우(39), 하(40)
if (evt.keyCode == 37) {
txt3.cols--;
} else if (evt.keyCode == 39) {
txt3.cols++;
} else if (evt.keyCode == 38) {
txt3.rows--;
} else if (evt.keyCode == 40) {
txt3.rows++;
}
■ 기본코드
<style>
input, textarea {
display: block;
margin-bottom: 10px;
outline: none;
}
</style>
<body>
<h1>키 이벤트</h1>
<form name = "form1">
<input type="text" name="txt1">
<input type="text" name="txt2">
<textarea name="txt3"></textarea>
</form>
</body>728x90