sự kiện onfocusout
Thí dụ
Thực thi JavaScript khi một trường đầu vào sắp mất tiêu điểm:
<input type="text"
onfocusout="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 onfocusout xảy ra khi một phần tử sắp mất tiêu điểm.
Mẹo: Sự kiện onfocusout tương tự như sự kiện onblur . 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 tập trung hay không, bạn nên sử dụng sự kiện onfocusout.
Mẹo: Sự kiện onfocusout ngược lại với sự kiện onfocusin .
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ sự kiện.
Event | |||||
---|---|---|---|---|---|
onfocusout | Yes | Yes | 52.0 | Yes | Yes |
Lưu ý: Sự kiện onfocusout có thể không hoạt động như mong đợi trong Chrome, Safari và Opera 15+ bằng cách sử dụng cú pháp JavaScript HTML DOM. Tuy nhiên, nó phải hoạt động như một thuộc tính HTML và bằng cách sử dụng phương thức addEventListener () (Xem ví dụ cú pháp bên dưới).
Cú pháp
Trong HTML:
<element onfocusout="myScript">
Trong JavaScript (có thể không hoạt động như mong đợi trong Chrome, Safari và Opera 15+):
object.onfocusout = function(){myScript};
Trong JavaScript, sử dụng phương thức addEventListener ():
object.addEventListener("focusout", 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: | Đú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 "onfocusin" cùng với sự kiện "onfocusout":
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
Thí dụ
Ủy quyền sự kiện: đặt thông số useCapture của addEventListener () thành true (cho tiêu điểm và làm mờ):
<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:
<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>