Thuộc tính tự động lấy nét HTML DOM select trả về và sửa đổi xem danh sách thả xuống có được lấy nét hay không khi tải trang.
Cú pháp
Sau đây là cú pháp -
-
1. Tự động lấy nét trở lại
object.autofocus
-
Sửa đổi lấy nét tự động
object.autofocus = true | false
Ví dụ
Hãy để chúng tôi xem một ví dụ về thuộc tính lấy nét tự động chọn HTML DOM -
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM autofocus property</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>autofocus Property Example</h1>
<p>Hi, Select your favourite subject:</p>
<select class='drop-down' name="Drop Down List">
<option>Physics</option>
<option>Maths</option>
<option>Chemistry</option>
<option>English</option>
<option>Economics</option>
<option>Hindi</option>
<option>Biology</option>
</select>
<br>
<button onclick="disable()" class="btn">Disable Autofocus</button>
<script>
function disable() {
document.querySelector(".drop-down").autofocus = false;
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào “ Tắt tự động lấy nét ”Để tắt tính năng tự động lấy nét trên danh sách thả xuống.
