Hướng dẫn và ví dụ Javascript KeyboardEvent
Xem thêm các chuyên mục:

Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.


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.

- TODO Link?
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 = "";
}
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.
- TODO Link?
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. |
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 | |
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 | |
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 |