Hướng Dẫn Và Ví Dụ Javascript KeyboardEvent - Openplanning

Trang chủ » Bảng Mã Keycode » Hướng Dẫn Và Ví Dụ Javascript KeyboardEvent - Openplanning

Có thể bạn quan tâm

  • Tất cả tài liệu
  • Java
    • Java Basic
    • Java Collections Framework
    • Java IO
    • Java New IO
    • Java Date Time
    • Servlet/JSP
    • Eclipse Tech
      • SWT
      • RCP
      • RAP
      • Eclipse Plugin Tools
    • XML & HTML
    • Java Opensource
    • Java Application Servers
  • Maven
  • Gradle
  • Servlet/Jsp
  • Thymeleaf
  • Spring
    • Spring Boot
    • Spring Cloud
  • Struts2
  • Hibernate
  • Java Web Service
  • JavaFX
  • SWT
  • Oracle ADF
  • Android
  • iOS
  • Python
  • Swift
  • C#
  • C/C++
  • Ruby
  • Dart
  • Batch
  • Database
    • Oracle
    • MySQL
    • SQL Server
    • PostGres
    • Other Database
  • Oracle APEX
  • Report
  • Client
  • ECMAScript / Javascript
  • TypeScript
  • NodeJS
  • ReactJS
  • Flutter
  • AngularJS
  • HTML
  • CSS
  • Bootstrap
  • OS
    • Ubuntu
    • Solaris
    • Mac OS
  • VPS
  • Git
  • SAP
  • Amazon AWS
  • Khác
    • Chưa phân loại
    • Phần mềm & ứng dụng tiện ích
    • VirtualBox
    • VmWare
Hướng dẫn và ví dụ Javascript KeyboardEvent
  1. KeyboardEvent
  2. Properties & Methods
  3. 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
OrderEvent
1onkeydown
2onkeypress
3onkeyup
keydownSự 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:keypressCó 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.keyupSự 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.jsfunction 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
PropertyDescription
altKeyTrả về true nếu phím "ALT" đang bị nhấn khi một sự kiện phím xẩy ra.
ctrlKeyTrả về true nếu phím "CTRL" đang bị nhấn khi một sự kiện phím xẩy ra.
shiftKeyTrả về true nếu phím "SHIFT" đang bị nhấn khi một sự kiện phím xẩy ra.
metaKeyTrả 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.jsfunction keydownHandler(evt) { if(evt.shiftKey) { document.getElementById("log-div").innerHTML ="evt.shiftKey = true"; } else { document.getElementById("log-div").innerHTML ="evt.shiftKey = false"; } }
PropertyDescription
keyCodeTrả 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.
keyTrả về tên của phím. Ví dụ (enter, shift, 0, 1, a, b,....)
charCodeTrả 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.
codeTrả về tên của phím. Ví dụ (Enter, Shift, Digit0, Digit1, KeyA, KeyB,...)
whichTrả 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.
keyCodekey(name of key)
...
9tab
12clear
13enter
...
480
491
502
513
....
65a
66b
67c
.....
** 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
keyCodekey(Name of key)code(Name of key)
.....
16shiftShiftLeft
.....
480Digit0
491Digit1
502Digit2
513Digit3
....
65aKeyA
66bKeyB
67cKeyC
68dKeyD
69eKeyE
.....
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
keykeyCode(keydown/keyup)keyCode(keypress)charCode(keypress)
.....
a/A65 / 6597 / 6597 / 65
b/B66 / 6698 / 6698 / 66
c/C67 / 6799 / 6799 / 67
d/D68 / 68100 / 68100 / 68
e/E69 / 69101 / 69101 / 69
.....
PropertyDescription
isComposingTrả 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.
locationTrả về vị trí của phím trên bàn phím hoặc thiết bị.
repeatTrả 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.
MethodDescription
getModifierState()Trả về true nếu phím hiện tại đang được kích hoạt.

3. Bảng Key, KeyCode

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

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

  • Giới thiệu về Javascript và ECMAScript
  • Bắt đầu nhanh với Javascript
  • Hộp thoại Alert, Confirm, Prompt trong Javascript
  • Bắt đầu nhanh với JavaScript
  • Biến (Variable) trong JavaScript
  • Các toán tử Bitwise
  • Mảng (Array) trong JavaScript
  • Vòng lặp trong JavaScript
  • Hàm trong JavaScript
  • Hướng dẫn và ví dụ JavaScript Number
  • Hướng dẫn và ví dụ JavaScript Boolean
  • Hướng dẫn và ví dụ JavaScript String
  • Câu lệnh rẽ nhánh if/else trong JavaScript
  • Câu lệnh rẽ nhánh switch trong JavaScript
  • Hướng dẫn xử lý lỗi trong JavaScript
  • Hướng dẫn và ví dụ JavaScript Date
  • Hướng dẫn và ví dụ JavaScript Module
  • Lịch sử phát triển của module trong JavaScript
  • Hàm setTimeout và setInterval trong JavaScript
  • Hướng dẫn và ví dụ Javascript Form Validation
  • Hướng dẫn và ví dụ JavaScript Web Cookie
  • Từ khóa void trong JavaScript
  • Lớp và đối tượng trong JavaScript
  • Kỹ thuật mô phỏng lớp và kế thừa trong JavaScript
  • Thừa kế và đa hình trong JavaScript
  • Tìm hiểu về Duck Typing trong JavaScript
  • Hướng dẫn và ví dụ JavaScript Symbol
  • Hướng dẫn JavaScript Set Collection
  • Hướng dẫn JavaScript Map Collection
  • Tìm hiểu về JavaScript Iterable và Iterator
  • Hướng dẫn sử dụng biểu thức chính quy trong JavaScript
  • Hướng dẫn và ví dụ JavaScript Promise, Async Await
  • Hướng dẫn và ví dụ Javascript Window
  • Hướng dẫn và ví dụ Javascript Console
  • Hướng dẫn và ví dụ Javascript Screen
  • Hướng dẫn và ví dụ Javascript Navigator
  • Hướng dẫn và ví dụ Javascript Geolocation API
  • Hướng dẫn và ví dụ Javascript Location
  • Hướng dẫn và ví dụ Javascript History API
  • Hướng dẫn và ví dụ Javascript Statusbar
  • Hướng dẫn và ví dụ Javascript Locationbar
  • Hướng dẫn và ví dụ Javascript Scrollbars
  • Hướng dẫn và ví dụ Javascript Menubar
  • Hướng dẫn xử lý JSON trong JavaScript
  • Xử lý sự kiện (Event) trong Javascript
  • Hướng dẫn và ví dụ Javascript MouseEvent
  • Hướng dẫn và ví dụ Javascript WheelEvent
  • Hướng dẫn và ví dụ Javascript KeyboardEvent
  • Hướng dẫn và ví dụ Javascript FocusEvent
  • Hướng dẫn và ví dụ Javascript InputEvent
  • Hướng dẫn và ví dụ Javascript ChangeEvent
  • Hướng dẫn và ví dụ Javascript DragEvent
  • Hướng dẫn và ví dụ Javascript HashChangeEvent
  • Hướng dẫn và ví dụ Javascript URL Encoding
  • Hướng dẫn và ví dụ Javascript FileReader
  • Hướng dẫn và ví dụ Javascript XMLHttpRequest
  • Hướng dẫn và ví dụ Javascript Fetch API
  • Phân tích XML trong Javascript với DOMParser
  • Giới thiệu về Javascript HTML5 Canvas API
  • Làm nổi bật Code với thư viện Javascript SyntaxHighlighter
  • Polyfill là gì trong khoa học lập trình?
Show More
  • Các hướng dẫn HTML
  • Các hướng dẫn CSS
  • Các hướng dẫn Bootstrap
  • Các hướng dẫn TypeScript
  • Các hướng dẫn lập trình Dart

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

  • Giới thiệu về Javascript và ECMAScript
  • Bắt đầu nhanh với Javascript
  • Hộp thoại Alert, Confirm, Prompt trong Javascript
  • Bắt đầu nhanh với JavaScript
  • Biến (Variable) trong JavaScript
  • Các toán tử Bitwise
  • Mảng (Array) trong JavaScript
  • Vòng lặp trong JavaScript
  • Hàm trong JavaScript
  • Hướng dẫn và ví dụ JavaScript Number
  • Hướng dẫn và ví dụ JavaScript Boolean
  • Hướng dẫn và ví dụ JavaScript String
  • Câu lệnh rẽ nhánh if/else trong JavaScript
  • Câu lệnh rẽ nhánh switch trong JavaScript
  • Hướng dẫn xử lý lỗi trong JavaScript
  • Hướng dẫn và ví dụ JavaScript Date
  • Hướng dẫn và ví dụ JavaScript Module
  • Lịch sử phát triển của module trong JavaScript
  • Hàm setTimeout và setInterval trong JavaScript
  • Hướng dẫn và ví dụ Javascript Form Validation
  • Hướng dẫn và ví dụ JavaScript Web Cookie
  • Từ khóa void trong JavaScript
  • Lớp và đối tượng trong JavaScript
  • Kỹ thuật mô phỏng lớp và kế thừa trong JavaScript
  • Thừa kế và đa hình trong JavaScript
  • Tìm hiểu về Duck Typing trong JavaScript
  • Hướng dẫn và ví dụ JavaScript Symbol
  • Hướng dẫn JavaScript Set Collection
  • Hướng dẫn JavaScript Map Collection
  • Tìm hiểu về JavaScript Iterable và Iterator
  • Hướng dẫn sử dụng biểu thức chính quy trong JavaScript
  • Hướng dẫn và ví dụ JavaScript Promise, Async Await
  • Hướng dẫn và ví dụ Javascript Window
  • Hướng dẫn và ví dụ Javascript Console
  • Hướng dẫn và ví dụ Javascript Screen
  • Hướng dẫn và ví dụ Javascript Navigator
  • Hướng dẫn và ví dụ Javascript Geolocation API
  • Hướng dẫn và ví dụ Javascript Location
  • Hướng dẫn và ví dụ Javascript History API
  • Hướng dẫn và ví dụ Javascript Statusbar
  • Hướng dẫn và ví dụ Javascript Locationbar
  • Hướng dẫn và ví dụ Javascript Scrollbars
  • Hướng dẫn và ví dụ Javascript Menubar
  • Hướng dẫn xử lý JSON trong JavaScript
  • Xử lý sự kiện (Event) trong Javascript
  • Hướng dẫn và ví dụ Javascript MouseEvent
  • Hướng dẫn và ví dụ Javascript WheelEvent
  • Hướng dẫn và ví dụ Javascript KeyboardEvent
  • Hướng dẫn và ví dụ Javascript FocusEvent
  • Hướng dẫn và ví dụ Javascript InputEvent
  • Hướng dẫn và ví dụ Javascript ChangeEvent
  • Hướng dẫn và ví dụ Javascript DragEvent
  • Hướng dẫn và ví dụ Javascript HashChangeEvent
  • Hướng dẫn và ví dụ Javascript URL Encoding
  • Hướng dẫn và ví dụ Javascript FileReader
  • Hướng dẫn và ví dụ Javascript XMLHttpRequest
  • Hướng dẫn và ví dụ Javascript Fetch API
  • Phân tích XML trong Javascript với DOMParser
  • Giới thiệu về Javascript HTML5 Canvas API
  • Làm nổi bật Code với thư viện Javascript SyntaxHighlighter
  • Polyfill là gì trong khoa học lập trình?
Show More
  • Các hướng dẫn HTML
  • Các hướng dẫn CSS
  • Các hướng dẫn Bootstrap
  • Các hướng dẫn TypeScript
  • Các hướng dẫn lập trình Dart

Các bài viết mới nhất

  • Dart Stream Single và Broadcast
  • Xử lý lỗi trong Dart Stream
  • Hướng dẫn và ví dụ Dart Stream
  • So sánh đối tượng trong Dart với thư viện Equatable
  • Flutter BloC cho người mới bắt đầu
  • Xử lý lỗi 404 trong Flutter GetX
  • Ví dụ đăng nhập và đăng xuất với Flutter Getx
  • Hướng dẫn và ví dụ Flutter NumberTextInputFormatter
  • Hướng dẫn và ví dụ Flutter multi_dropdown
  • Hướng dẫn và ví dụ Flutter flutter_form_builder
  • Hướng dẫn và ví dụ Flutter GetX obs Obx
  • Hướng dẫn và ví dụ Flutter GetX GetBuilder
  • Từ khoá part và part of trong Dart
  • Hướng dẫn và ví dụ Flutter InkWell
  • Hướng dẫn và ví dụ Flutter Radio
  • Bài thực hành Flutter SharedPreferences
  • Hướng dẫn và ví dụ Flutter Slider
  • Hướng dẫn và ví dụ Flutter SkeletonLoader
  • Chỉ định cổng cố định cho Flutter Web trên Android Studio
  • Tạo Module trong Flutter
Show More
  • Các hướng dẫn ECMAScript, Javascript

Từ khóa » Bảng Mã Keycode