Thuộc tính tự động lấy nét của Nút HTML DOM được liên kết với thuộc tính tự động lấy nét của phần tử
Cú pháp
Sau đây là cú pháp cho -
Đặt thuộc tính lấy nét tự động của nút -
buttonObject.autofocus = true|false
Ở đây, true | false chỉ định liệu nút đầu vào đã cho có được tập trung vào không khi trang tải.
- Đúng - Nút đầu vào có tiêu điểm
- Sai - Nút nhập không lấy nét.
Ví dụ
Hãy để chúng tôi xem một ví dụ về thuộc tính tự động lấy nét của nút HTML DOM -
<!DOCTYPE html>
<html>
<body>
<button type="button" id="MyButton" autofocus>BUTTON</button>
<p>Click the below button to know if the input button above automatically gets the focus on page load or not</p>
<button onclick="buttonFocus()">CLICK IT</button>
<p id="Sample"></p>
<script>
function buttonFocus() {
var x = document.getElementById("MyButton").autofocus;
if(x==true)
document.getElementById("Sample").innerHTML="The input button does get focus on page load";
else
document.getElementById("Sample").innerHTML="The input button does not get focus on
page load";
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút NHẤP VÀO NÓ -
Trong ví dụ trên -
Chúng tôi có một nút có id “MyButton” và thuộc tính tự động lấy nét được bật -
<button type="button" id="MyButton" autofocus>BUTTON</button>
Sau đó, chúng ta có một nút NHẤP VÀO IT để thực thi hàm buttonFocus () -
<button onclick="buttonFocus()">CLICK IT</button>
Hàm buttonFocus () lấy phần tử nút bằng phương thức getElementById () và nhận giá trị lấy nét tự động của nó, là Boolean và gán nó cho biến x. Bằng cách sử dụng các câu lệnh điều kiện, chúng tôi kiểm tra xem giá trị lấy nét tự động là đúng hay sai và hiển thị văn bản phù hợp tương ứng trong phần tử
có id “Mẫu” được liên kết với nó.
function buttonFocus() {
var x = document.getElementById("MyButton").autofocus;
if(x==true)
document.getElementById("Sample").innerHTML="The input button does get focus on page load";
else
document.getElementById("Sample").innerHTML="The input button does not get focus on page load";
}