Sự kiện onblur trong JavaScript

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

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

Sự kiện onblur trong JavaScript dùng để xử lý sự kiện khi con trỏ chuột rời khỏi ô input trong HTML.

Code Sự kiện onblur trong JavaScript

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

onblur="nhapTuoi()"

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

tuoi.addEventListener('blur', 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('blur', 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.onblur = 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ử

Cách sử dụng onblur hiệu quả trong thực tế

onblur phát huy tác dụng rõ nhất khi cần xử lý dữ liệu ngay sau lúc người dùng hoàn tất một trường nhập liệu. Thay vì kiểm tra liên tục trong khi gõ, sự kiện này giúp thao tác kiểm tra diễn ra đúng thời điểm người dùng chuyển sang vị trí khác.

Kiểm tra dữ liệu sau khi người dùng nhập

Với các biểu mẫu, onblur có thể được dùng để kiểm tra nội dung ngay khi người dùng rời khỏi ô nhập. Cách này phù hợp với những trường như tên, số điện thoại, email hoặc mật khẩu, giúp phát hiện dữ liệu chưa hợp lệ mà không cần chờ đến lúc gửi biểu mẫu.

<input type="email" onblur="kiemTraEmail(this.value)">

<script>
function kiemTraEmail(email) {
    if (!email.includes("@")) {
        alert("Email chưa đúng định dạng.");
    }
}
</script>

Điểm quan trọng là chỉ nên kiểm tra những điều kiện cần thiết ở bước này. Các quy tắc phức tạp hoặc dữ liệu quan trọng vẫn nên được kiểm tra lại trước khi xử lý ở phía máy chủ.

Hiển thị thông báo lỗi ngay tại ô nhập

Thay vì sử dụng hộp thoại gây gián đoạn thao tác, có thể kết hợp onblur với một khu vực thông báo để người dùng biết chính xác trường nào cần sửa. Cách trình bày này đặc biệt hữu ích với biểu mẫu có nhiều trường.

<input id="username" onblur="kiemTraTen()">
<p id="thongBao"></p>

<script>
function kiemTraTen() {
    const username = document.getElementById("username").value;
    const thongBao = document.getElementById("thongBao");

    if (username.trim() === "") {
        thongBao.textContent = "Vui lòng nhập tên.";
        return;
    }

    thongBao.textContent = "";
}
</script>

Thông báo nên ngắn gọn và hướng dẫn trực tiếp cách khắc phục. Người dùng không nên phải đoán lý do dữ liệu bị từ chối.

Kết hợp onblur với các sự kiện JavaScript khác

onblur không nhất thiết phải hoạt động độc lập. Có thể kết hợp với onfocus để tạo quy trình tương tác hoàn chỉnh: khi người dùng chọn ô nhập thì chuẩn bị giao diện, khi rời khỏi ô thì kiểm tra và cập nhật trạng thái.

<input
    onfocus="xoaThongBao()"
    onblur="kiemTraDuLieu(this)"
>

<script>
function xoaThongBao() {
    // Chuẩn bị lại trạng thái khi người dùng bắt đầu nhập
}

function kiemTraDuLieu(input) {
    if (input.value.trim() === "") {
        input.setAttribute("aria-invalid", "true");
        return;
    }

    input.setAttribute("aria-invalid", "false");
}
</script>

Khi xây dựng biểu mẫu thực tế, nên giữ phần xử lý của onblur ngắn gọn và tập trung vào một nhiệm vụ cụ thể. Điều này giúp mã JavaScript dễ đọc, dễ bảo trì và hạn chế việc một sự kiện phải xử lý quá nhiều công việc cùng lúc.

Lời kết

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