Sự kiện onblur trong JavaScript

• Trần Thị Vân
• 1128
• 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ử

Lời kết

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