Sự kiện onfocusin
Thí dụ
Thực thi JavaScript khi một trường đầu vào sắp lấy tiêu điểm:
<input type="text"
onfocusin="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 onfocusin xảy ra khi một phần tử sắp lấy tiêu điểm.
Mẹo: Sự kiện onfocusin tương tự như sự kiện onfocus . Sự khác biệt chính là sự kiện onfocus 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ó được tiêu điểm hay không, bạn nên sử dụng sự kiện onfocusin.
Mẹo: Sự kiện onfocusin ngược lại với sự kiện onfocusout .
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 | |||||
---|---|---|---|---|---|
onfocusin | Yes | Yes | 52.0 | Yes | Yes |
Lưu ý: Sự kiện onfocusin 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 onfocusin="myScript">
Trong JavaScript (có thể không hoạt động như mong đợi trong Chrome, Safari và Opera 15+):
object.onfocusin = function(){myScript};
Trong JavaScript, sử dụng phương thức addEventListener ():
object.addEventListener("focusin", 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>