Sự kiện onblur trong JavaScript

• Trần Ngọc Thanh
• 30
• 27/08/2025

Sự kiện onblur trong JavaScript dùng để xử lý sự kiện khi con trỏ chuột rời khỏi ô input của thẻ HTML, chi tiết như nào hãy cùng chúng tôi phân tích:

Sự kiện onblur trong JavaScript

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 của thẻ HTML.

Code Sự kiện onblur trong JavaScript

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

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

<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('blur', 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.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.