Thuộc tính tự động lấy nét của Hộp kiểm tra đầu vào HTML DOM trả về và sửa đổi giá trị của thuộc tính lấy nét tự động của phần tử HTML đầu vào có hộp kiểm type =””.
Cú pháp
Sau đây là cú pháp -
1. Tự động lấy nét trở lại
object.autofocus
2. 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 -
<!DOCTYPE html>
<html>
<head>
<title<HTML DOM autofocus property</title<
<style>
body{
text-align:center;
}
p{
font-size:1.5rem;
color:#ff8741;
}
input{
width:30px;
height:30px;
outline:2px solid #db133a;
}
button{
background-color:#db133a;
color:#fff;
padding:8px;
border:none;
width:120px;
margin:0.5rem;
border-radius:50px;
outline:none;
}
</style>
</head>
<body>
<h1>autofocus Property Example</h1>
<p>Do you need help?</p>
<input type="checkbox" autofocus>
<br>
<button onclick="yes()">Yes</button>
<button onclick="no()">No</button>
<script>
function yes() {
document.querySelector("input").checked = true;
}
function no() {
document.querySelector("input").checked = false;
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào nút “Có / Không” để chọn và bỏ chọn hộp kiểm nhưng như bạn có thể thấy hộp kiểm đã được lấy nét tự động khi tải trang với đường viền màu đỏ.
