Thuộc tính đặt lại đầu vào HTML DOM đã bị vô hiệu hóa

Thuộc tính vô hiệu hóa đặt lại đầu vào DOM DOM được sử dụng để thiết lập hoặc quay lại nếu nút đặt lại có bị tắt hay không. Nó sử dụng các giá trị boolean, với true đại diện cho nút đặt lại sẽ bị vô hiệu hóa và ngược lại là false. Thuộc tính bị vô hiệu hóa được đặt thành false theo mặc định. Phần tử bị vô hiệu hóa có màu xám theo mặc định và không thể nhấp vào được.

Cú pháp

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

Đặt thuộc tính bị vô hiệu hóa -

resetObject.autofocus = true|false

Ở đây, true =nút đặt lại bị vô hiệu hóa và false =nút đặt lại không bị tắt. Nó là sai theo mặc định.

Ví dụ

Hãy cùng chúng tôi xem xét một ví dụ về thuộc tính Đã tắt thiết lập lại đầu vào -

<!DOCTYPE html>
<html>
<body>
<h1>Input reset disabled Property</h1>
<form style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Age"> <br><br>
<input type="reset" id="RESET1">
</form>
<p>Disable the above reset button by clicking on the DISABLE button</p>
<button type="button" onclick="disableReset()">DISABLE</button>
<p id="Sample"></p>
<script>
   function disableReset() {
      document.getElementById("RESET1").disabled=true;
      document.getElementById("Sample").innerHTML = "The reset button is now disabled" ;
   }
</script>
</body>
</html>

Đầu ra

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

Thuộc tính đặt lại đầu vào HTML DOM đã bị vô hiệu hóa

Khi nhấp vào nút TẮT -

Thuộc tính đặt lại đầu vào HTML DOM đã bị vô hiệu hóa

Trong ví dụ trên -

Chúng tôi đã tạo một phần tử với type =”reset”, id =”RESET1”. Nhấp vào nút này sẽ đặt lại dữ liệu biểu mẫu. Nút này bên trong biểu mẫu có chứa hai trường văn bản và biểu mẫu cũng có kiểu nội tuyến được áp dụng cho nó -

<form style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Age"> <br><br>
<input type="reset" id="RESET1">
</form>

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

<button type="button" onclick="disableReset()">DISABLE</button>

Phương thức disableReset () nhận phần tử đầu vào với kiểu đặt lại bằng phương thức getElementById () và đặt thuộc tính bị vô hiệu hóa của nó thành true. Điều này làm cho nút đặt lại không thể nhấp được và người dùng không thể tương tác với nó nữa. Bây giờ nó đã chuyển sang màu xám -

function disableReset() {
   document.getElementById("RESET1").disabled=true;
   document.getElementById("Sample").innerHTML = "The reset button is now disabled" ;
}