sự kiện onfocusin
Ví dụ
Gọi một hàm khi trường đầu vào sắp lấy được tiêu điểm:
<input type="text"
onfocusin="myFunction()">
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Sự miêu tả
Sự kiện onfocusin
xảy ra khi một phần tử được lấy nét.
Sự kiện onfocusin
thường được sử dụng trên các trường đầu vào.
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("focusin", myScript );
Hãy tự mình thử »Chi tiết kỹ thuật
Bong bóng: | Đú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 |
Hỗ trợ trình duyệt
onfocusin
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 |
Thêm ví dụ
Ví dụ
Sử dụng onfocus và onblur :
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Hãy tự mình thử »Ví dụ
Xóa trường nhập vào tiêu điểm:
<input type="text" onfocus="this.value=''" value="Blabla">
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ử »