Hướng dẫn sử dụng Javascript KeyboardEvent

Xem thêm các chuyên mục:

Nhóm thành viên của o7planning đã xây dựng một website tuyệt vời và miễn phí giúp mọi người học tiếng Anh, học từ vựng dễ dàng hơn. Hãy truy cập để học tiếng Anh ngay bây giờ:

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.
  • 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 = "";
}

 

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.
  • 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'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

Xem thêm các chuyên mục: