<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>키 이벤트</title>
<script>
function whatKeyDown(e)
{
var str = "";
var div = document.getElementById("div");
div.innerHTML = ""; // div 객체 내용 초기화
str += "e.key = " + e.key + "<br>";
str += "e.code = " + e.code + "<br>";
div.innerHTML = str; //div객체에 html 문자열 출력
}
</script>
</head>
<body>
<h3>키 리스너와 키 이벤트 객체의 프로퍼티</h3>
<hr>
텍스트 창에 키를 눌러 보세요.<br>
<input type="text" id="text" onkeypress="whatKeyDown(event)">
<div id="div" style="background-color:skyblue; width:250px; height:70px">
</div>
</body>
</html>
키 이벤트 객체의 프로퍼티
keyCode // 입력된 키의 유니코드 값
altkey // <Alt>키가 눌러진 상태이면 true
altLeft // 왼쪽 <Alt>키가 눌러진 상태이면 true
ctrlKey // <Ctrl> 키가 눌러진 상태이면 true
ctrlLeft // 왼쪽 <Ctrl>키가 눌러진 상태이면 true
shiftKey // <Shift>키가 눌러진 상태이면 true
shiftLeft // 왼쪽 <Shift>키가 눌러진 상태이면 true
. onreset과 onsubmit
onreset리스너는 reset버튼을 클릭하여 폼을 초기화할 때 호출되며,
onsubmit리스너는 submit버튼을 클릭되어 폼을 서버로 전송할 때 호출된다.
onreset리스너에서 false를 리턴하면 폼이 초기화되지 않고
onsubmit리스너에서 false르 리턴하면 폼은 서버로 전송되지 않는다.
이 두 리스너는 <form>태그에 작성된다.
. onkeypress : <Enter>, <space> 키와 문자키에 대해서만
키가 눌려지는 순간 호출 ㅡ <f1>, <shift>, <pgdn>, <del>,
<ins> 등 문자 키가 아닌 경우 호출되지 않음
꾸준함의 가치를 믿는 개발자