sự kiện onblur
Ví dụ
Gọi hàm khi người dùng rời khỏi trường nhập:
<input type="text" onblur="myFunction()">
Hãy tự mình thử »Sự miêu tả
Sự kiện onblur
xảy ra khi một phần tử HTML bị mất tiêu điểm .
Sự kiện onblur
thường được sử dụng trên các trường đầu vào.
Sự kiện onblur
thường được sử dụng khi xác thực biểu mẫu (khi người dùng rời khỏi trường biểu mẫu).
Sự kiện dựa trên trọng tâm
Event | Occurs When |
---|---|
focus | An element gets focus |
blur | An element loses focus |
focusin | An element gets focus |
focusout | An element loses focus |
Xem thêm:
Cú pháp
Trong JavaScript, sử dụng phương thức addEventListener():
object .addEventListener("blur", myScript );
Hãy tự mình thử »Chi tiết kỹ thuật
Bong bóng: | KHÔNG |
---|---|
Có thể hủy: | KHÔNG |
Loại sự kiện: | Tập trungSự kiện |
Thẻ HTML: | TẤT CẢ các phần tử HTML, NGOẠI TRỪ: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> và <title> |
Phiên bản DOM: | Sự kiện cấp 2 |
Thêm ví dụ
Ví dụ
Sử dụng thuộc tính onfocus và onblur :
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Hãy tự mình thử »Ví dụ
Phân quyền sự kiện: sử dụng các sự kiện lấy nét và làm mờ :
Đặt tham số useCapture của addEventListener() thành true :
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
let x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true );
x.addEventListener("blur", myBlurFunction, true );
function myFocusFunction() {
document.getElementById("myInput").style.backgroundColor = "yellow";
}
function myBlurFunction() {
document.getElementById("myInput").style.backgroundColor = "";
}
</script>
Hãy tự mình thử »Ví dụ
Phân quyền sự kiện: sử dụng các sự kiện focusin và focusout :
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
let x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);
function myFocusFunction() {
document.getElementById("myInput").style.backgroundColor = "yellow";
}
function myBlurFunction() {
document.getElementById("myInput").style.backgroundColor = "";
}
</script>
Hãy tự mình thử »Hỗ trợ trình duyệt
onblur
là tính năng DOM Cấp 2 (2001).
Nó được hỗ trợ đầy đủ trong tất cả các trình duyệt:
Chrome | Edge | Firefox | Safari | Opera | IE |
Yes | Yes | Yes | Yes | Yes | 9-11 |