Thuộc tính autofocus của HTML DOM Select trả về và cho phép thay đổi xem danh sách thả xuống có được focus khi tải trang hay không.
Cú pháp
Cú pháp như sau:
1. Lấy autofocus:
object.autofocus
Thiết lập autofocus:
object.autofocus = true | false
Ví dụ
Dưới đây là ví dụ về thuộc tính autofocus của HTML DOM Select:
<!DOCTYPE html> <html> <head> <title>Thuộc tính autofocus của HTML DOM</title> <style> body{ text-align:center; color:#fff; background: radial-gradient( circle farthest-corner at 23.1% 64.6%, rgba(129,125,254,1) 0%, rgba(111,167,254,1) 90% ) no-repeat; height:100vh; } p{ font-weight:700; font-size:1.1rem; } .drop-down{ display:block; width:35%; border:none; font-weight:bold; padding:10px; margin:1rem auto; background-color:#ffffff7a; outline-color:black; } .btn{ background:orange; border:none; height:2rem; border-radius:2px; width:35%; margin:2rem auto; display:block; color:#fff; font-weight:bold; outline:none; cursor:pointer; } </style> </head> <body> <h1>Ví dụ thuộc tính autofocus</h1> <p>Chào bạn, hãy chọn môn học yêu thích:</p> <select class='drop-down' name="Drop Down List"> <option>Vật lý</option> <option>Toán học</option> <option>Hóa học</option> <option>Tiếng Anh</option> <option>Kinh tế</option> <option>Tiếng Hindi</option> <option>Sinh học</option> </select> <br> <button onclick="disable()" class="btn">Vô hiệu hóa Autofocus</button> <script> function disable() { document.querySelector(".drop-down").autofocus = false; } </script> </body> </html>
Kết quả
Đoạn mã trên sẽ cho kết quả như sau:
Nhấn vào nút 「Vô hiệu hóa Autofocus」 để vô hiệu hóa autofocus trên danh sách thả xuống.
