sự kiện onfocus
Thí dụ
Thực thi JavaScript khi một trường đầu vào có tiêu điểm:
<input type="text"
onfocus="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 onfocus xảy ra khi một phần tử được lấy tiêu điểm.
Sự kiện onfocus thường được sử dụng nhất với <input>, <select> và <a>.
Mẹo: Sự kiện onfocus ngược lại với sự kiện onblur .
Mẹo: Sự kiện onfocus tương tự như sự kiện onfocusin . 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 có thể sử dụng sự kiện onfocusin. Tuy nhiên, bạn có thể đạt được điều này bằng cách sử dụng tham số useCapture tùy chọn của phương thức addEventListener () cho sự kiện onfocus.
Hỗ trợ trình duyệt
| Event | |||||
|---|---|---|---|---|---|
| onfocus | Yes | Yes | Yes | Yes | Yes |
Cú pháp
Trong HTML:
<element onfocus="myScript">
Trong JavaScript:
object.onfocus = function(){myScript};
Trong JavaScript, sử dụng phương thức addEventListener ():
object.addEventListener("focus", 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: | Khô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 "onfocus" cùng với sự kiện "onblur":
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Thí dụ
Xóa trường nhập trên tiêu điểm:
<!-- When the input field gets focus, replace its current value with an
empty string -->
<input type="text" onfocus="this.value=''" value="Blabla">
Thí dụ
Ủy quyền sự kiện: đặt tham số useCapture của addEventListener () thành true:
<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 (không được Firefox hỗ trợ):
<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>