Sự kiện onfocusin

Sự kiện DOM Sự kiện FocusEvent

Định nghĩa và cách sử dụng

Sự kiện onfocusin xảy ra khi phần tử sắp nhận được sự tập trung.

Mặc dù Firefox không hỗ trợ sự kiện onfocusin, bạn có thể sử dụng bộ lắng nghe sự kiện capture của sự kiện onfocus (sử dụng tham số tùy chọn useCapture của phương thức addEventListener()) để xác định xem một phần tử con có nhận được sự tập trung hay không.Sự kiện onfocusin tương tự như Sự kiện onfocusKhác biệt chính giữa sự kiện onfocus là sự kiện này không bắn tia. Do đó, nếu bạn muốn biết một phần tử hoặc phần tử con có nhận được sự tập trung hay không, bạn nên sử dụng sự kiện onfocusin.

Mặc dù Firefox không hỗ trợ sự kiện onfocusin, bạn có thể sử dụng bộ lắng nghe sự kiện capture của sự kiện onfocus (sử dụng tham số tùy chọn useCapture của phương thức addEventListener()) để xác định xem một phần tử con có nhận được sự tập trung hay không..

Mặc dù Firefox không hỗ trợ sự kiện onfocusin, bạn có thể sử dụng bộ lắng nghe sự kiện capture của sự kiện onfocus (sử dụng tham số tùy chọn useCapture của phương thức addEventListener()) để xác định xem một phần tử con có nhận được sự tập trung hay không.Lưu ý: Sự kiện onfocusoutSự kiện onfocusin với

Ngược lại.

Mô hình

Ví dụ 1

Chạy JavaScript khi trường nhập sắp nhận được sự tập trung:

Thử ngay

<input type="text" onfocusin="myFunction()">

Dưới trang có nhiều ví dụ TIY khác.

Cú pháp

Trong HTML:< element.addEventListener("focusin",onfocusin="

Thử ngay

">

Trong JavaScript, sử dụng phương thức addEventListener():Trong JavaScript (trong Chrome, Safari và Opera 15+ có thể không hoạt động bình thường):.addEventListener("focusin",.onfocusin = function(){

Thử ngay

};

Trong JavaScript, sử dụng phương thức addEventListener():object .addEventListener("focusin",myScript

Thử ngay

Chú ý：); Internet Explorer 8 hoặc các phiên bản trước không hỗ trợPhương thức addEventListener()

.

Chi tiết kỹ thuật: Hỗ trợ
Bao bọc: Có thể hủy:
Không hỗ trợ: Sự kiện FocusEvent
Các thẻ HTML được hỗ trợ: Tất cả các phần tử HTML, trừ: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> và <title>
Phiên bản DOM: Level 2 Events

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ sự kiện này hoàn toàn.

Sự kiện Chrome IE Firefox Safari Opera
onfocusin Hỗ trợ Hỗ trợ 52.0 Hỗ trợ Hỗ trợ

Chú ý：Sự kiện onfocusin có thể không hoạt động như mong đợi trong Chrome, Safari và Opera 15+ khi sử dụng ngữ pháp JavaScript HTML DOM. Tuy nhiên, nó nên được sử dụng như một thuộc tính HTML và bằng phương thức addEventListener() (xin xem ví dụ ngữ pháp bên dưới).

Thêm nhiều ví dụ

Ví dụ 2

Sử dụng sự kiện "onfocusin" và "onfocusout" cùng nhau：

<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">

Thử ngay

Ví dụ 3

事件委托：đặt tham số useCapture của phương thức addEventListener() là true (sử dụng cho focus và blur)：

<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ử ngay

Ví dụ 4

事件委托：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>

Thử ngay

Sự kiện DOM Sự kiện FocusEvent