sự kiện tập trung
Ví dụ
Gọi một hàm khi trường đầu vào được lấy nét:
<input type="text"
onfocus="myFunction()">
Hãy tự mình thử »Sự miêu tả
Sự kiện onfocus
xảy ra khi một phần tử được lấy nét.
Sự kiện onfocus
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("focus", myScript );
Hãy tự mình thử »Chi tiết kỹ thuật
Bong bóng: | KHÔ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
onfocus
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ử »