Thuộc tính mật khẩu nhập DOM HTML bị vô hiệu hóa

Thuộc tính đã vô hiệu hóa Mật khẩu nhập DOM DOM được sử dụng để thiết lập hoặc trả lại cho dù trường mật khẩu có bị vô hiệu hóa hay không. Nó sử dụng các giá trị boolean với true đại diện cho phần tử nên 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 -

passwordObject.disabled = true|false;

Ở đây, trường true =mật khẩu bị vô hiệu hóa và trường false =trường mật khẩu không bị vô hiệu hóa. 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 Vô hiệu hóa mật khẩu nhập -

<!DOCTYPE html>
<html>
<body>
<h1>Input Password disabled Property</h1>
Password: <input type="password" id="PASS">
<p>Disable the above password field by clicking on the DISABLE button</p>
<button type="button" onclick="disablePass()">DISABLE</button>
<p id="Sample"></p>
<script>
   function disablePass() {
      document.getElementById("PASS").disabled=true;
      document.getElementById("Sample").innerHTML = "The password field is now disabled" ;
   }
</script>
</body>
</html>

Đầu ra

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

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

Thuộc tính mật khẩu nhập DOM HTML bị vô hiệu hóa

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

Thuộc tính mật khẩu nhập DOM HTML bị vô hiệu hóa

Trong ví dụ trên -

Trước tiên, chúng tôi đã tạo trường mật khẩu đầu vào với id “PASS” và thuộc tính bị tắt của nó theo mặc định được đặt thành FALSE -

Password: <input type="password" id="PASS" value="abcd123">

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

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

Phương thức disablePass () sử dụng phương thức getElementById () để lấy trường đầu vào với kiểu mật khẩu và đặt thuộc tính bị vô hiệu hóa thành true. Thao tác này sẽ vô hiệu hóa trường mật khẩu và làm nó bị xám. Sau đó, chúng tôi hiển thị một thông báo bằng cách sử dụng thuộc tính innerHTML của đoạn văn có id “Mẫu” cho biết rằng trường mật khẩu hiện đã bị vô hiệu hóa -

function disablePass() {
   document.getElementById("PASS").disabled=true;
   document.getElementById("Sample").innerHTML = "The password field is now disabled" ;
}