Sự kiện onkeyup trong JavaScript

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

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

Sự kiện onkeyup trong JavaScript dùng để xử lý sự kiện khi bạn gõ phím nhưng lúc bạn nhã phím ra sẽ được kích hoạt.

Code Sự kiện onkeyup trong JavaScript

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

onkeyup="nhapTuoi()"

<input onkeyup="nhapTuoi()" type="text" id="tuoi" placeholder="Nhập tuổi từ 18 tới 40" >

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

tuoi.addEventListener('keyup', 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">

<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('keyup', 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.onkeyup = 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ử

Những lỗi thường gặp khi sử dụng sự kiện onkeyup

Sự kiện onkeyup khá đơn giản nhưng dễ phát sinh lỗi khi được dùng để xử lý dữ liệu nhập liên tục. Phần lớn vấn đề đến từ việc gắn sự kiện sai phần tử, xử lý mọi lần nhấn phím mà không cần thiết hoặc không xác định đúng dữ liệu cần kiểm tra.

Xử lý sự kiện onkeyup sai đối tượng

Trước khi viết hàm xử lý, cần xác định chính xác phần tử nào phát sinh sự kiện. Nếu gắn onkeyup vào sai ô nhập hoặc lấy nhầm phần tử bằng JavaScript, hàm có thể không chạy hoặc trả về dữ liệu không đúng.

Với các biểu mẫu có nhiều trường nhập liệu, nên đặt id hoặc thuộc tính nhận diện rõ ràng cho từng phần tử. Khi xử lý, hãy lấy đúng giá trị từ phần tử phát sinh sự kiện thay vì phụ thuộc vào một phần tử khác có cấu trúc tương tự.

Gọi hàm quá nhiều lần khi người dùng nhập liệu

onkeyup được kích hoạt sau mỗi lần người dùng nhả phím. Vì vậy, nếu hàm bên trong thực hiện tìm kiếm, lọc dữ liệu hoặc gửi yêu cầu đến máy chủ, số lần xử lý có thể tăng rất nhanh khi người dùng nhập một chuỗi dài.

Với tác vụ nhẹ như kiểm tra độ dài chuỗi hoặc thay đổi nội dung hiển thị, cách này thường không gây vấn đề. Tuy nhiên, với tác vụ tốn tài nguyên, nên giới hạn tần suất xử lý hoặc chỉ thực hiện khi dữ liệu thực sự cần được kiểm tra.

Không kiểm tra giá trị phím trước khi xử lý

Không phải lần nhả phím nào cũng tạo ra dữ liệu mới. Các phím như mũi tên, Shift hoặc một số phím điều khiển có thể kích hoạt sự kiện nhưng không làm thay đổi nội dung ô nhập.

Nếu hàm thực hiện công việc nặng sau mỗi lần onkeyup, việc kiểm tra dữ liệu hiện tại trước khi xử lý sẽ giúp tránh những thao tác không cần thiết. Đây cũng là cách làm cho mã JavaScript dễ kiểm soát hơn khi kết hợp với các chức năng tìm kiếm, lọc hoặc kiểm tra dữ liệu theo thời gian thực.

Lời kết

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