19/09/2018, 14:48
Sự kiện onfocus
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 < ! DOCTYPE html > < html > < body > < p > M ộ t h à m s ẽ đượ c k í ch ho ạ t khi b ạ n nh ấ n chu ộ t v ...
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body> <p>Một hàm sẽ được kích hoạt khi bạn nhấn chuột vào một trong những ô bên dưới. Hàm này sẽ thay đổi màu nền của ô.</p> Họ của bạn: <input type="text" id="fname" onfocus="myFunction(this.id)"><br> Tên của bạn: <input type="text" id="lname" onfocus="myFunction(this.id)"> <script> function myFunction(x) { document.getElementById(x).style.background = "yellow"; } </script> </body> </html> |
Demo
Xem thêm các ví dụ bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính onfocus được kích hoạt ngay chi người dùng chuyển con trỏ vào thẻ.
Onfocus được sử dụng hầu hết trong thẻ <input>, <select> và <a>.
Mẹo: Thuộc tính onfocus ngược với thuộc tính onblur.
Trình duyệt hỗ trợ
| Thuộc tính |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| onfocus | Có | Có | Có | Có | Có |
Khác biệt giữa HTML 4.01 và HTML5
Không có sự khác biệt.
Cú pháp
|
1 |
<element onfocus="script"> |
Giá trị thuộc tính
| Giá trị | Miêu tả |
|---|---|
| script | Chạy script khi thuộc tính được kích hoạt |
Chi tiết
Sử dụng trong tất cả các thẻ của HTML ngoại trừ : <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> và <title>.
Ví dụ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <body> <p>Khi bạn chuyển trỏ chuột vào khung, một hàm sẽ được kích hoạt để chuyển màu nền sang vàng. Khi bạn chuyển trỏ chột ra ngoài, một hàm sẽ được kích hoạt để chuyển màu nền sang đỏ.</p> Nhập tên của bạn: <input type="text" id="myInput" onfocus="focusFunction()" onblur="blurFunction()"> <script> // Focus = Chuyển nền sang màu vàng function focusFunction() { document.getElementById("myInput").style.background = "yellow"; } // Onblur = Chuyển nền sang màu đỏ function blurFunction() { document.getElementById("myInput").style.background = "red"; } </script> </body> </html> |
Demo
