잡동사니에도 사랑을

[21.10.06] exam06(02_jQueryEvent) - KeyName(keyCode) 본문

JAVA_EE/JQuery

[21.10.06] exam06(02_jQueryEvent) - KeyName(keyCode)

luvforjunk 2021. 10. 7. 02:39
728x90
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/event.css">
</head>
<body>
<h1>Key 이벤트 확인하기</h1>
<div id="input">
	<input type="text">
</div>
<h2>결과</h2>
<div id="result"></div>

<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
function getKeyName(keyCode) {
	
	//JSON의 형식 - {변수: 값, 변수: 값, 변수: 값, ...}형태로 css stylesheet형식이랑 같다
	//JSON의 배열 - [{변수: 값}, {변수: 값}, {변수: 값}, ....]
	
	var keyMap = [
		{code: 8, name: "backspace"}, 
		{code: 9, name: "tab"}, 
		{code: 13, name: "enter"}, 
		{code: 16, name: "shift"},
		{code: 17, name: "ctrl"},
		{code: 18, name: "alt"},
		{code: 19, name: "pausebreak"},
		{code: 20, name: "capslock"},
		{code: 21, name: "han/eng"},
		{code: 25, name: "hanja"},
		{code: 27, name: "esc"},
		{code: 65, name: "A"},
		{code: 97, name: "a"},
		];
	
	for(var i=0; i<keyMap.length; i++){
		if(keyMap[i].code == keyCode){
			return keyMap[i].name;
		}
	}
}

$(function(){
	// Javascript에서 event.keyCode 를 하면 각 키보드에 해당하는 고유번호를 알 수 있다.
	// 이 메소드가 jQuery에서는 event.which 으로 사용하게 된다.
	// .keydown - 대소문자 구별X (A도 a도 65라고 나온다)
	
	// $('#input > input[type=text]').keypress(function(e){ - 대소문자 구별함, 특수키는 구별 못함
		$('#input > input[type=text]').keydown(function(e) {
		$('#result').html(e.which + '번 키 눌러짐 &gt;&gt; ' + getKeyName(e.which));// &gt; : >
		// event.which는 keyCode값을 불러오라는 뜻이다
	});
});
</script>
</body>
</html>

 

 

결과창

728x90
반응형

'JAVA_EE > JQuery' 카테고리의 다른 글

[21.10.13] exam08(02_jQueryEvent)  (0) 2021.10.14
[21.10.06] exam07(02_jQueryEvent) - Key이벤트(keypress)  (0) 2021.10.07
[21.10.06] exam05(02_jQueryEvent) - Key이벤트 확인(Key를 입력하거나 Key를 계속 눌렀을 때의 이벤트 발생)  (0) 2021.10.07
[21.10.06] exam04(02_jQueryEvent) - Hover이벤트 확인(Mouse Enter Event (onMouseOver), Mouse Leave Event (onMouseOut))  (0) 2021.10.07
[21.10.06] exam03(02_jQueryEvent) - 클릭 이벤트 확인(click, dbclick)  (0) 2021.10.07
'JAVA_EE/JQuery' Related Articles more