가끔 키보드에서 입력받는 값을 알아야 할 필요가 있음.
- 키를 누르는 동안 : keydown
- 키를 누르는 순간 : keypress
- 키가 다시 올라오는 순간 : keyup
- 키 값 : event.key, event.code
e.type : , e.key : , e.code :
e.type : , e.key : , e.code :
e.type : , e.key : , e.code :
입력 값 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>key Event</title>
</head>
<body>
<h1>
가끔 키보드에서 입력받는 값을 알아야 할 필요가 있음.
</h1>
<ul>
<li>
키를 누르는 동안 : keydown
</li>
<li>
키를 누르는 순간 : keypress
</li>
<li>
키가 다시 올라오는 순간 : keyup
</li>
<li>
키 값 : event.key, event.code
</li>
<!-- 게임 만들때 많이 사용. 홈페이지에서 ID,PW 받을 때 사용 가능 -->
</ul>
<h1>
e.type : <span id="type1"></span>,
e.key : <span id="key1"></span>,
e.code : <span id="code1"></span>
</h1>
<h1>
e.type : <span id="type2"></span>,
e.key : <span id="key2"></span>,
e.code : <span id="code2"></span>
</h1>
<h1>
e.type : <span id="type3"></span>,
e.key : <span id="key3"></span>,
e.code : <span id="code3"></span>
</h1>
입력 값 : <input type="text" id="str">
<script>
const h1_type1 = document.getElementById('type1');
const h1_key1 = document.getElementById('key1');
const h1_code1 = document.getElementById('code1');
const h1_type2 = document.getElementById('type2');
const h1_key2 = document.getElementById('key2');
const h1_code2 = document.getElementById('code2');
const h1_type3 = document.getElementById('type3');
const h1_key3 = document.getElementById('key3');
const h1_code3 = document.getElementById('code3');
//e => element로 사용해도 되지만 e로 많이 사용.
document.getElementById('str').addEventListener('keydown',(e) =>{
console.log(e.key); //입력값에 적은 키 값이 나옴
h1_type1.textContent = e.type;
h1_key1.textContent = e.key;
h1_code1.textContent = e.code;
})
document.getElementById('str').addEventListener('keypress',(e) =>{
h1_type2.textContent = e.type;
h1_key2.textContent = e.key;
h1_code2.textContent = e.code;
})
document.getElementById('str').addEventListener('keyup',(e) =>{
h1_type3.textContent = e.type;
h1_key3.textContent = e.key;
h1_code3.textContent = e.code;
})
</script>
</body>
</html>
'JS > JS 공부' 카테고리의 다른 글
| [JS] markup validation service 오류검사사이트! (0) | 2023.04.25 |
|---|---|
| [JS] 정규식 (정규표현식 사용 패턴) (0) | 2023.04.25 |
| [JS] mosemove 마우스가 움직이면 아이콘도 이동 (0) | 2023.04.24 |
| [JS] DOM_event : document영역에서 사용되는 이벤트 (0) | 2023.04.24 |
| [JS] classList속성 <ul class="ul list iter"> (0) | 2023.04.24 |