Thuộc tính lấy nét tự động phạm vi đầu vào HTML DOM

Thuộc tính lấy nét tự động phạm vi đầu vào HTML DOM được liên kết với thuộc tính lấy nét tự động 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 thanh trượt phạm vi đầu vào có được tự động lấy tiêu điểm khi trang tải hay không.

Cú pháp

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

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

rangeObject.autofocus = true|false

Ở đây, true đại diện cho thanh trượt phạm vi sẽ lấy tiêu điểm và false biểu thị ngược lại. 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ụ cho thuộc tính lấy nét tự động phạm vi đầu vào -

<!DOCTYPE html>
<html>
<body>
<h1>Input range autofocus property</h1>
<form>
<input type="range" id="RANGE1" name="VOL" autofocus>
</form>
<br>
<button type=”button” onclick="rangeFocus()">CHECK</button>
<p id="Sample"></p>
<script>
   function rangeFocus() {
      var R = document.getElementById("RANGE1").autofocus;
      document.getElementById("Sample").innerHTML = "The autofocus property is 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 phạm vi đầu vào HTML DOM

Khi nhấp vào nút KIỂM TRA -

Thuộc tính lấy nét tự động phạm vi đầu vào HTML DOM

Trong ví dụ trên -

Chúng tôi đã tạo một trường đầu vào chứa bên trong một biểu mẫu có type =“range”, id =“RANGE1”, name =“VOL” và nó đã bật thuộc tính lấy nét tự động, tức là được đặt thành true.

<form>
<input type="range" id="RANGE1" name="VOL" autofocus>
</form>

Sau đó, chúng tôi đã tạo một nút KIỂM TRA sẽ thực thi phương thức rangeFocus () khi được người dùng nhấp vào -

<button type=”button” onclick="rangeFocus()">CHECK</button>

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

function rangeFocus() {
   var R = document.getElementById("RANGE1").autofocus;
   document.getElementById("Sample").innerHTML = "The autofocus property is set to: "+R;
}