Hướng dẫn và ví dụ Javascript KeyboardEvent

KeyboardEvent
Properties & Methods
Bảng Key, KeyCode

1. KeyboardEvent

KeyboardEvent là một interface đại diện cho các sự kiện xẩy ra khi người dùng tương tác với bàn phím. Bao gồm các sự kiện keydown, keypress, keyup.

KeyboardEvent là interface con của UIEvent.

Hướng dẫn và ví dụ Javascript UiEvent

Order	Event
1	onkeydown
2	onkeypress
3	onkeyup

keydown

Sự kiện keydown xẩy ra khi bạn nhấn xuống (press down) một phím (key). Trong hệ điều hành Windows, nếu bạn tiếp tục giữ cho phím ở trạng thái bị nhấn nó sẽ liên tục phát ra các sự kiện keypress .. keydown. Nhưng trong hệ điều hành MacOS, nếu bạn tiếp tục giữ cho phím ở trạng thái bị nhấn nó liên tục phát ra sự kiện keydown. Giống như hình minh họa dưới đây:

keypress

Có 2 trường hợp sự kiện keypress xẩy ra, trong đó trường hợp 1 tôi đã giải thích ở phía trên (Xem sự kiện keydown). Trường hợp 2, bạn nhấn xuống (press down) một phím và nhanh chóng nhả ra (release) lúc này sẽ có 2 sự kiện phát ra theo thứ tự là keypress, keyup.

keyup

Sự kiện keyup xẩy ra khi bạn nhả (release) ra khỏi một phím.

Chú ý: Sự kiện keypress sẽ không phát ra đối với các phím như ALT, SHIFT, CTRL, META-KEY, ESC, Nếu bạn muốn phát hiện (detect) xem các phím đó có đang được nhấn hay không bạn có thể sử dụng thuộc tính (property) altKey, shiftKey, ctrlKey, metaKey của đối tượng event.

keyevents-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>KeyEvent Example</title>

      <script src="keyevents-example.js"></script>

   </head>
   <body>

      <h3>KeyEvent example</h3>

      <input type="text"
            onkeydown="keydownHandler(event)"
            onkeyup="keyupHandler(event)"
            onkeypress="keypressHandler(event)"/>
      <br/><br/>

      <textarea id="log-div" rows = "10" disabled>

      </textarea>
      <br/>
      <button onclick="clearLog()">Clear</button>

   </body>
</html>

keyevents-example.js

function keydownHandler(evt)  {
    appendLog("Keydown!");
}

function keyupHandler(evt)  {
    appendLog("Keyup!");
}

function keypressHandler(evt)  {
    appendLog("Keypress!");
}


function appendLog(text)  {
    var oldText = document.getElementById("log-div").value;
    document.getElementById("log-div").value = oldText+"\n"+ text;
}

function clearLog()  {
    document.getElementById("log-div").value = "";
}

2. Properties & Methods

KeyEvent là interface con của UIEvent, vì vậy nó thừa kế các thuộc tính (property) và các phương thức từ interface này.

Hướng dẫn và ví dụ Javascript UiEvent

Property	Description
altKey	Trả về true nếu phím "ALT" đang bị nhấn khi một sự kiện phím xẩy ra.
ctrlKey	Trả về true nếu phím "CTRL" đang bị nhấn khi một sự kiện phím xẩy ra.
shiftKey	Trả về true nếu phím "SHIFT" đang bị nhấn khi một sự kiện phím xẩy ra.
metaKey	Trả về true nếu phím "META" đang bị nhấn khi một sự kiện phím xẩy ra.

Ví dụ: Nhấn phím 'SHIFT' và giữ nguyên sau đó nhấn một phím bất kỳ.

prop-shiftKey-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>KeyEvent Example</title>

      <script src="prop-shiftKey-example.js"></script>

   </head>
   <body>

      <h3>Hold key 'SHIFT' and press any key!</h3>

      <input type="text"
            onkeydown="keydownHandler(event)"/>
      <br/><br/>

      <div id="log-div" style="color:red;"></div>

   </body>
</html>

prop-shiftKey-example.js

function keydownHandler(evt)  {

   if(evt.shiftKey) {
      document.getElementById("log-div").innerHTML ="evt.shiftKey = true";
   } else {
      document.getElementById("log-div").innerHTML ="evt.shiftKey = false";
   }

}

Property	Description
keyCode	Trả về mã ký tự Unicode của phím đã kích hoạt sự kiện keypress, hoặc mã phím Unicode của phím đã kích hoạt sự kiện này.
key	Trả về tên của phím. Ví dụ (enter, shift, 0, 1, a, b,....)

charCode	Trả về mã ký tự Unicode của phím đã kích hoạt sự kiện keypress. Chú ý: charCode = 0 trong sự kiện keydown, keyup.
code	Trả về tên của phím. Ví dụ (Enter, Shift, Digit0, Digit1, KeyA, KeyB,...)

which	Trả về charCode trong sự kiện keypress, hoặc keyCode trong sự kiện keydown, keyup.

keyCode, key:

Mỗi phím (key) trên bàn phím đều có một số đại diện cho nó, được gọi là keyCode. Chẳng hạn phím 'a' có keyCode = 65. Không có khái niệm chữ hoa chữ thường đối với phím. Vì vậy keyCode của 'a' hoặc 'A' đều là 65.

keyCode	key (name of key)
...
9	tab
12	clear
13	enter
...
48	0
49	1
50	2
51	3
....
65	a
66	b
67	c
.....

** Bạn có xem chi tiết bảng Key & KeyCode ở phần phụ lục phía cuối bài viết này.

prop-key-keyCode-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>KeyEvent Example</title>

      <script>
          function keydownHandler(evt) {
            var logDiv = document.getElementById("log-div");

            logDiv.innerHTML = "event.key= " + evt.key +"<br/>"
                             + "event.keyCode= "+ evt.keyCode;
          }
      </script>

   </head>
   <body>

      <h3>event.key, event.keyCode</h3>

      <input type="text" onkeydown="keydownHandler(event)"/>
      <br/><br/>

      <div id="log-div" style="color:red;"></div>
   </body>
</html>

code, charCode

keyCode	key (Name of key)	code (Name of key)
.....
16	shift	ShiftLeft
.....
48	0	Digit0
49	1	Digit1
50	2	Digit2
51	3	Digit3
....
65	a	KeyA
66	b	KeyB
67	c	KeyC
68	d	KeyD
69	e	KeyE
.....

charCode chỉ được gán giá trị trong sự kiện keypress, nó luôn có giá trị 0 trong sự kiện keydown & keyup. charCode là một con số đại diện cho một ký tự Unicode mà người dùng nhấn.

prop-code-charCode-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>KeyEvent Example</title>

      <script>
          function keypressHandler(evt) {
            var logDiv = document.getElementById("log-div");

            logDiv.innerHTML = "event.code= " + evt.code +"<br/>"
                             + "event.charCode= "+ evt.charCode;
          }
      </script>

   </head>
   <body>

      <h3>event.code, event.charCode</h3>

      <input type="text" onkeypress="keypressHandler(event)"/>
      <br/><br/>

      <div id="log-div" style="color:red;"></div>

   </body>
</html>

keyCode vs charCode

key	keyCode (keydown/keyup)	keyCode (keypress)	charCode (keypress)
.....
a/A	65 / 65	97 / 65	97 / 65
b/B	66 / 66	98 / 66	98 / 66
c/C	67 / 67	99 / 67	99 / 67
d/D	68 / 68	100 / 68	100 / 68
e/E	69 / 69	101 / 69	101 / 69
.....
Property	Description
isComposing	Trả về true nếu trạng thái của sự kiện là composing (Đang soạn thảo). Ngược lại trả về false.
location	Trả về vị trí của phím trên bàn phím hoặc thiết bị.
repeat	Trả về true nếu phím đang bị giữ xuống (hold down) một cách liên tục. Ngược lại trả về false.
Method	Description
getModifierState()	Trả về true nếu phím hiện tại đang được kích hoạt.

3. Bảng Key, KeyCode

keyCode	Key (Name of key).
0	That key has no keycode
3	break
8	backspace / delete
9	tab
12	clear
13	enter
16	shift
17	ctrl
18	alt
19	pause/break
20	caps lock
21	hangul
25	hanja
27	escape
28	conversion
29	non-conversion
32	spacebar
33	page up
34	page down
35	end
36	home
37	left arrow
38	up arrow
39	right arrow
40	down arrow
41	select
42	print
43	execute
44	Print Screen
45	insert
46	delete
47	help
48	0
49	1
50	2
51	3
52	4
53	5
54	6
55	7
56	8
57	9
58	:
59	semicolon (firefox), equals
60	<
61	equals (firefox)
63	ß
64	@ (firefox)
65	a
66	b
67	c
68	d
69	e
70	f
71	g
72	h
73	i
74	j
75	k
76	l
77	m
78	n
79	o
80	p
81	q
82	r
83	s
84	t
85	u
86	v
87	w
88	x
89	y
90	z
91	Windows Key / Left ⌘ / Chromebook Search key
92	right window key
93	Windows Menu / Right ⌘
95	sleep
96	numpad 0
97	numpad 1
98	numpad 2
99	numpad 3
100	numpad 4
101	numpad 5
102	numpad 6
103	numpad 7
104	numpad 8
105	numpad 9
106	multiply
107	add
108	numpad period (firefox)
109	subtract
110	decimal point
111	divide
112	f1
113	f2
114	f3
115	f4
116	f5
117	f6
118	f7
119	f8
120	f9
121	f10
122	f11
123	f12
124	f13
125	f14
126	f15
127	f16
128	f17
129	f18
130	f19
131	f20
132	f21
133	f22
134	f23
135	f24
144	num lock
145	scroll lock
160	^
161	!
162	؛ (arabic semicolon)
163	#
164	$
165	ù
166	page backward
167	page forward
168	refresh
169	closing paren (AZERTY)
170	*
171	~ + * key
172	home key
173	minus (firefox), mute/unmute
174	decrease volume level
175	increase volume level
176	next
177	previous
178	stop
179	play/pause
180	e-mail
181	mute/unmute (firefox)
182	decrease volume level (firefox)
183	increase volume level (firefox)
186	semi-colon / ñ
187	equal sign
188	comma
189	dash
190	period
191	forward slash / ç
192	grave accent / ñ / æ / ö
193	?, / or °
194	numpad period (chrome)
219	open bracket
220	back slash
221	close bracket / å
222	single quote / ø / ä
223	`
224	left or right ⌘ key (firefox)
225	altgr
226	< /git >, left back slash
230	GNOME Compose Key
231	ç
233	XF86Forward
234	XF86Back
235	non-conversion
240	alphanumeric
242	hiragana/katakana
243	half-width/full-width
244	kanji
251	unlock trackpad (Chrome/Edge)
255	toggle touchpad

Hướng dẫn và ví dụ Javascript KeyboardEvent

1. KeyboardEvent

2. Properties & Methods

3. Bảng Key, KeyCode

Các hướng dẫn ECMAScript, Javascript

Các hướng dẫn ECMAScript, Javascript