Sự kiện onkeypress trong JavaScript

• Trần Thị Vân
• 1087
• 28/08/2025

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

Sự kiện onkeypress 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 onkeypress trong JavaScript

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

onkeypress="nhapTuoi()"

<input onkeypress="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 onkeypress không gán trực tiếp trong JavaScript

tuoi.addEventListener('keypress', 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('keypress', function() {
  // code xử lý
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.onkeypress = 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ử

Phân biệt onkeypress với onkeydown và onkeyup trong JavaScript

Khi xử lý thao tác bàn phím trong JavaScript, onkeypress, onkeydown và onkeyup có cách hoạt động khác nhau. Việc phân biệt đúng giúp lựa chọn sự kiện phù hợp với mục đích xử lý thay vì dùng một sự kiện cho mọi trường hợp.

onkeypress khác onkeydown như thế nào?

onkeydown xảy ra ngay khi người dùng nhấn một phím xuống, trong khi onkeypress chủ yếu liên quan đến thao tác tạo ra ký tự. Vì vậy, hai sự kiện có thể cho kết quả khác nhau khi xử lý các phím như Shift, Ctrl, Alt hoặc phím mũi tên.

Ví dụ, nếu cần phát hiện người dùng vừa nhấn một phím bất kỳ để thực hiện một hành động, onkeydown thường phù hợp hơn. Còn với các đoạn mã cũ sử dụng onkeypress, cần lưu ý rằng sự kiện này không còn được khuyến nghị cho các dự án JavaScript mới.

input.onkeydown = function(event) {
    console.log("Phím vừa được nhấn:", event.key);
};

onkeypress khác onkeyup ở điểm nào?

Điểm khác biệt rõ nhất nằm ở thời điểm sự kiện được kích hoạt. onkeypress xảy ra trong quá trình xử lý thao tác nhấn phím tạo ký tự, còn onkeyup được gọi khi người dùng đã thả phím ra.

Chẳng hạn, một ứng dụng có thể dùng onkeydown để bắt đầu xử lý thao tác và dùng onkeyup để thực hiện công việc sau khi người dùng hoàn tất việc nhấn phím. Cách lựa chọn này đặc biệt hữu ích khi cần kiểm soát thời điểm phản hồi của giao diện.

input.onkeyup = function(event) {
    console.log("Đã thả phím:", event.key);
};

Nên dùng sự kiện bàn phím nào trong JavaScript?

Với code JavaScript hiện đại, nên ưu tiên keydown và keyup thay vì xây dựng chức năng mới dựa trên keypress. Hai sự kiện này cho phép xử lý nhiều loại phím và kiểm tra thông tin phím thông qua đối tượng sự kiện một cách rõ ràng hơn.

• keydown: phù hợp khi cần phản ứng ngay lúc phím được nhấn xuống.
• keyup: phù hợp khi cần xử lý sau thời điểm người dùng thả phím.
• keypress: nên hạn chế sử dụng trong code mới vì đây là sự kiện đã cũ và không còn là lựa chọn ưu tiên.

Nếu đang bảo trì một website có sẵn onkeypress, không nhất thiết phải thay đổi ngay toàn bộ mã nguồn. Tuy nhiên, khi bổ sung chức năng mới, nên cân nhắc chuyển sang keydown hoặc keyup tùy thời điểm cần bắt sự kiện.

Lời kết

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