Thuộc tính lấy nét tự động lấy nét tìm kiếm đầu vào HTML DOM

Thuộc tính tự động lấy nét của HTML DOM Input Search được liên kết với thuộc tính tự động lấy nét của phần tử HTML . Thuộc tính này được sử dụng để thiết lập hoặc trả về nếu trường tìm kiếm đầu vào sẽ tự động được lấy tiêu điểm khi trang tải hay không tải.

Cú pháp

Sau đây là cú pháp cho -

Đặt thuộc tính lấy nét tự động -

searchObject.autofocus = true|false

Ở đây, true đại diện cho trường tìm kiếm nên lấy tiêu điểm và false đại diện cho trường khác. Nó được đặt thành false theo mặc định.

Ví dụ

Hãy để chúng tôi xem xét một ví dụ về thuộc tính lấy nét tự động tìm kiếm đầu vào -

<!DOCTYPE html>
<html>
<body>
<h1>Input search autofocus property</h1>
<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits" autofocus>
</form>
<p>Get the autofocus attribute value for the above search field by clicking the below
button.</p>
<button type="button" onclick="FocusVal()">CHECK FOCUS</button>
<p id="Sample"></p>
<script>
   function FocusVal() {
      var R = document.getElementById("SEARCH1").autofocus;
      document.getElementById("Sample").innerHTML = "The search field has autofocus property
set to "+R;
}
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Thuộc tính lấy nét tự động lấy nét tìm kiếm đầu vào HTML DOM

Khi nhấp vào nút KIỂM TRA TẬP TRUNG -

Thuộc tính lấy nét tự động lấy nét tìm kiếm đầu vào HTML DOM

Trong ví dụ trên -

Trước tiên, chúng tôi đã tạo một phần tử với type =”search”, id =”SEARCH1”, name =”results” và nó có thuộc tính lấy nét tự động được đặt thành true. Trường tìm kiếm nằm trong biểu mẫu -

<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits" autofocus>
</form>

Sau đó, chúng tôi tạo một nút CHECK FOCUS sẽ thực thi phương thức FocusVal () khi người dùng nhấp vào -

<button type="button" onclick="FocusVal()">CHECK FOCUS</button>

Phương thức FocusVal () nhận phần tử đầu vào với tính năng tìm kiếm kiểu sử dụng phương thức getElementById () và nhận thuộc tính lấy nét tự động của nó. Thuộc tính autofocus trả về true và false tùy thuộc vào giá trị thuộc tính autofocus của trường tìm kiếm. Giá trị này được gán cho biến f và được hiển thị trong đoạn có id “Mẫu” bằng cách sử dụng thuộc tính innerHTML của nó -

function FocusVal(){
   var f = document.getElementById("SEARCH1").autofocus;
   document.getElementById("Sample").innerHTML = "The search field autofocus property is set to: "+f;
}