Sự kiện onkeydown trong JavaScript

• Trần Thị Vân
• 1139
• 27/08/2025

Chức năng của Sự kiện onkeydown trong JavaScript

Sự kiện onkeydown trong JavaScript dùng để xử lý sự kiện khi gõ một phím bất kì vào ô input của thẻ HTML.

Code Sự kiện onkeydown trong JavaScript

Sự kiện onkeydown gán trực tiếp trong JavaScript

onkeydown="nhapTuoi()"

<input onkeydown="nhapTuoi()" type="text" id="tuoi" placeholder="Nhập tuổi từ 18 tới 40" ><br>
<script>
function nhapTuoi(){
var tuoi= document.getElementById('tuoi');
var sotuoi =  tuoi.value;
if(sotuoi<18||sotuoi>40){
  alert("Bạn phải nhập tuổi từ 18 tới 40"); 
}
}
</script>

Chạy Thử

Sự kiện onkeydown không gán trực tiếp trong JavaScript

tuoi.addEventListener('keydown', function() {
var sotuoi =  tuoi.value;
if(sotuoi<18||sotuoi>40){
  alert("Bạn phải nhập tuổi từ 18 tới 40"); 
}
});

<input type="text" id="tuoi" placeholder="Nhập tuổi từ 18 tới 40" ><br>
<input type="text" id="tuoi2" placeholder="Nhập tuổi từ 18 tới 40" ><br>
<script>
// Lấy đối tượng HTML
var tuoi= document.getElementById('tuoi');
// dùng tên đối tượng HTML vừa lấy để addEventListener
tuoi.addEventListener('keydown', function() {
var sotuoi =  tuoi.value;
if(sotuoi<18||sotuoi>40){
  alert("Bạn phải nhập tuổi từ 18 tới 40"); 
}
});

// Lấy đối tượng HTML
var tuoi2 = document.getElementById('tuoi2');
// dùng tên đối tượng HTML vừa lấy để gọi hàm
tuoi2.onkeydown = function(){
var sotuoi =  tuoi2.value;
if(sotuoi<18||sotuoi>40){
  alert("Bạn phải nhập tuổi từ 18 tới 40"); 
}
};
</script>

Chạy Thử

Khi nào nên sử dụng sự kiện onkeydown trong JavaScript?

Sự kiện onkeydown phù hợp khi website cần phản hồi ngay tại thời điểm người dùng nhấn một phím. Thay vì chờ người dùng nhập xong hoặc thả phím, JavaScript có thể nhận biết thao tác này để thực hiện một hành động tương ứng.

Trong thực tế, onkeydown thường hữu ích với ô nhập liệu, phím tắt và các giao diện yêu cầu thao tác bằng bàn phím. Việc lựa chọn đúng trường hợp sử dụng giúp mã JavaScript dễ kiểm soát và mang lại trải nghiệm tương tác tự nhiên hơn.

Kiểm tra phím người dùng nhập vào

Khi cần phân biệt từng phím được nhấn, onkeydown có thể kết hợp với thuộc tính key của đối tượng sự kiện. Cách này phù hợp để kiểm tra các phím như Enter, Escape, mũi tên hoặc một ký tự cụ thể.

Ví dụ, có thể phát hiện phím Enter để xử lý một thao tác mà không cần người dùng nhấn thêm nút trên giao diện:

document.addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
        console.log("Người dùng đã nhấn Enter");
    }
});

Cách kiểm tra này đặc biệt hữu ích với biểu mẫu, hộp tìm kiếm hoặc các thành phần tương tác cần thao tác nhanh bằng bàn phím.

Xử lý phím tắt và thao tác nhanh

onkeydown có thể dùng để tạo các phím tắt cho những chức năng thường xuyên được sử dụng. Chẳng hạn, website có thể nhận tổ hợp phím và thực hiện một hành động mà không cần người dùng tìm đến nút tương ứng.

Khi xây dựng phím tắt, nên kiểm tra đồng thời phím chính và các phím bổ trợ như Ctrl, Alt hoặc Shift. Đồng thời, cần tránh ghi đè những phím tắt quen thuộc của trình duyệt hoặc hệ điều hành nếu không thật sự cần thiết.

Kiểm soát thao tác nhập liệu trên website

Trong các ô nhập liệu, onkeydown có thể hỗ trợ kiểm soát cách người dùng tương tác với bàn phím. Ví dụ, website có thể phát hiện một phím nhất định để ngăn thao tác không phù hợp hoặc chuyển sang bước xử lý tiếp theo.

Tuy nhiên, không nên dùng onkeydown để thay thế toàn bộ cơ chế kiểm tra dữ liệu. Với nội dung người dùng nhập, việc xác thực vẫn cần được thực hiện ở bước xử lý dữ liệu phù hợp để tránh bỏ sót những trường hợp không phát sinh từ thao tác bàn phím.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Sự kiện onkeydown trong JavaScript.