sự kiện onblur
Thí dụ
Thực thi JavaScript khi người dùng rời khỏi trường đầu vào:
<input type="text" onblur="myFunction()">
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Sự kiện onblur xảy ra khi một đối tượng mất tiêu điểm.
Sự kiện onblur thường được sử dụng nhất với mã xác thực biểu mẫu (ví dụ: khi người dùng rời khỏi trường biểu mẫu).
Mẹo: Sự kiện onblur ngược lại với sự kiện onfocus .
Mẹo: Sự kiện onblur tương tự như sự kiện onfocusout . Sự khác biệt chính là sự kiện onblur không bong bóng. Do đó, nếu bạn muốn tìm hiểu xem một phần tử hoặc phần tử con của nó có mất tiêu điểm hay không, bạn có thể sử dụng sự kiện onfocusout. Tuy nhiên, bạn có thể đạt được điều này bằng cách sử dụng tham số useCapture tùy chọn của phương thức addEventListener () cho sự kiện onblur.
Hỗ trợ trình duyệt
Event | |||||
---|---|---|---|---|---|
onblur | Yes | Yes | Yes | Yes | Yes |
Cú pháp
Trong HTML:
<element onblur="myScript">
Trong JavaScript:
object.onblur = function(){myScript};
Trong JavaScript, sử dụng phương thức addEventListener ():
object.addEventListener("blur", myScript);
Lưu ý: Phương thức addEventListener () không được hỗ trợ trong Internet Explorer 8 và các phiên bản trước đó.
Chi tiết kỹ thuật
Bong bóng: | Không |
---|---|
Có thể hủy bỏ: | Không |
Loại sự kiện: | FocusEvent |
Các thẻ HTML được hỗ trợ: | 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 |
Các ví dụ khác
Thí dụ
Sử dụng "onblur" cùng với sự kiện "onfocus":
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Thí dụ
Ủy quyền sự kiện: đặt tham số useCapture của addEventListener () thành true:
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
var 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>
Thí dụ
Ủy quyền sự kiện: sử dụng sự kiện focusin (không được Firefox hỗ trợ):
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
var 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>