반응형
<최종 화면>onkeypress, onkeyup 대해 알아본다.
키보드 이벤트를 알아보기 위해 우선 입력창을 만들자.
키보드로 누른 값(keyCode)을 바로 입력창에 자동을 적어보자. onkeypress
키보드를 눌렀다가 뗄때 발동하는 이벤트에 대해 알아보자. onkeyup
keyup을 이용해서 입력창에 문자를 입력했을때, 바로 대문자로 바꿀 수 있다.
<복붙용 코드>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body onkeypress="keypress()">
아무키나 누르세요. <br>
char <input type="text" id="keychar"><br>
keycode <input type="text" id="keycode"><br>
shift키 <input type="checkbox" id="shiftkey"><br>
<script>
// 키보드 이벤트 종류: keypress(). keydown(0), keyup()
// keypress()는 방향키를 인식하지 못함 , 대신 대소문자 구별
// keydown(), keyup()은 방향키 인식함, 대소문자 구별하지 못함.
function keypress(){
//원래부터 존재하는 내장 객체
var keycode=event.keyCode;
document.getElementById('keychar').value=String.fromCharCode(keycode);
document.getElementById('keycode').value=keycode;
document.getElementById('shiftkey').checked=event.shiftKey;
}
</script>
<hr>
<!-- 참고.!! 별외 -->
<!-- html요소에 속성을 이벤트처리를 하기 위해 함수를 전달하는 것과 -->
<!-- addEventListener로 이벤트를 처리할 때 콜백함수를 지정하는 것이 차이가 있음 : this키워드의 차이!!-->
<input type="text" onkeyup="aaa()">
<script>
var aaa= function(){//키보드를 눌렀다가 뛸때 발동함
alert(this); //this는 이벤트 발생 요소가 아니라 window내장객체임!!
}
</script>
<hr>
<input type="text" id="in1">
<script>
var kkk= function(){
//alert(this); //this는 이벤트 발생 요소를 지칭함!!
}
document.getElementById('in1').addEventListener('keyup',kkk);
</script>
</body>
</html>
|
반응형
'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML+Java script' 카테고리의 다른 글
| HTML+Java script (기초) canvas를 이용한 움직이는 웹게임?(움직이기만 함) (1) | 2019.12.17 |
|---|---|
| HTML+Java script (기초) canvas (문자, 도형,선, 이미지 그려보기) (0) | 2019.12.17 |
| HTML+Java script (기초) 이벤트 처리, 정규표현식 (0) | 2019.12.17 |
| HTML+Java script (기초) BOM (0) | 2019.12.16 |
| HTML+Java script (기초) DOM 요소(속성 변경, 노드 동적 생성) (0) | 2019.12.16 |
댓글