Đối tượng HTML DOM KeyboardEvent đạ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.
Thuộc tính
Đây, “KeyboardEvent” có thể có các thuộc tính và phương thức sau -
| Thuộc tính / Phương pháp | Mô tả |
|---|---|
| altKey | Nó trả về việc phím "ALT" có được nhấn hay không |
| Mã biểu tượng | Nó trả về mã ký tự Unicode của khóa |
| mã | Nó trả về mã của khóa |
| ctrlKey | Nó trả về việc phím "CTRL" có được nhấn hay không |
| getModifierState () | Nó trả về true nếu khóa được chỉ định được kích hoạt và false nếu không hoạt động |
| isComposing | Nó trả về trạng thái của sự kiện có đang soạn hay không |
| Nó trả về giá trị khóa của khóa được đại diện bởi sự kiện | |
| Mã khóa | Nó trả về mã ký tự Unicode của khóa đã kích hoạt sự kiện |
| vị trí | Nó trả về vị trí của một phím trên bàn phím hoặc thiết bị |
| metaKey | Nó trả về việc liệu phím "meta" có được nhấn khi sự kiện chính được kích hoạt hay không |
| lặp lại | Nó trả về việc một phím có đang được nhấn giữ liên tục hay không |
| shiftKey | Nó trả về liệu phím "SHIFT" có được nhấn khi sự kiện phím được kích hoạt hay không |
| nào | Nó trả về mã ký tự Unicode của khóa đã kích hoạt sự kiện |
Sự kiện
Và, sau đây là các sự kiện hoạt động trê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 |
| bật khóa | Sự kiện xảy ra khi người dùng phát hành khóa |
Ví dụ
Hãy để chúng tôi xem một ví dụ cho key tài sản -
<!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>Fill in the blanks:
<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> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Trước khi nhập bất kỳ thứ gì vào trường văn bản -
Sau khi nhập ‘b’ trong trường văn bản -
Sau khi nhập ‘B’ trong trường văn bản -
