Đối tượng KeyboardEvent trong HTML DOM đại diện cho một sự kiện khi người dùng nhấn một phím trên bàn phím.
Các thuộc tính
Đối tượng KeyboardEvent có thể có các thuộc tính và phương thức sau:
| Thuộc tính/Phương thức | Mô tả |
|---|---|
| altKey | Trả về việc phím "ALT" có được nhấn hay không |
| charCode | Trả về mã ký tự Unicode của phím |
| code | Trả về mã của phím |
| ctrlKey | Trả về việc phím "CTRL" có được nhấn hay không |
| getModifierState() | Trả về true nếu phím chỉnh sửa được chỉ định được kích hoạt, false nếu không |
| isComposing | Trả về việc trạng thái sự kiện có đang soạn thảo hay không |
| key | Trả về giá trị phím của phím được đại diện bởi sự kiện |
| keyCode | Trả về mã ký tự Unicode của phím kích hoạt sự kiện |
| location | Trả về vị trí của phím trên bàn phím hoặc thiết bị |
| metaKey | Trả về việc phím "meta" có được nhấn khi sự kiện phím được kích hoạt hay không |
| repeat | Trả về việc một phím có đang được giữ xuống lặp lại hay không |
| shiftKey | Trả về việc phím "SHIFT" có được nhấn khi sự kiện phím được kích hoạt hay không |
| which | Trả về mã ký tự Unicode của phím kích hoạt sự kiện |
Các sự kiện
Dưới đây là các sự kiện tác động lên đối tượng KeyboardEvent:
| Sự kiện | Mô tả |
|---|---|
| onkeydown | Sự kiện xảy ra khi người dùng đang nhấn một phím |
| onkeypress | Sự kiện xảy ra khi người dùng nhấn một phím |
| onkeyup | Sự kiện xảy ra khi người dùng thả một phím |
Ví dụ
Ví dụ minh họa thuộc tính key:
<!DOCTYPE html> <html> <head> <title>KeyboardEvent key</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } input[type="button"] { border-radius: 10px; } </style> </head> <body> <form> <fieldset> <legend>KeyboardEvent-key</legend> <label>Điền vào chỗ trống: <input type="text" id="textSelect" placeholder="__ for Ball" onkeypress="getEventData(event)" autocomplete="off"> </label> <div id="divDisplay"></div> </fieldset> </form> <script> var divDisplay = document.getElementById("divDisplay"); var textSelect = document.getElementById("textSelect"); function getEventData(InputEvent) { if(InputEvent.key === 'B') divDisplay.textContent = 'Correct Answer'; else if(InputEvent.key === 'b') divDisplay.textContent = 'Close call, you might have caps lock turned off'; else divDisplay.textContent = 'Try Again, '+textSelect.placeholder; textSelect.textContent = ''; } </script> </body> </html>
Kết quả
Trước khi nhập bất kỳ ký tự nào vào trường văn bản:
Sau khi nhập 'b' vào trường văn bản:
Sau khi nhập 'B' vào trường văn bản:
