HTML DOM Input Password maxLength Thuộc tính

Thuộc tính maxlength Mật khẩu đầu vào HTML DOM được sử dụng để thiết lập hoặc trả về thuộc tính maxlength của trường mật khẩu đầu vào. Thuộc tính maxLength chỉ định số ký tự tối đa bạn có thể nhập vào trường mật khẩu.

Cú pháp

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

Đặt thuộc tính maxLength -

passwordObject.maxLength = integer

Ở đây, số nguyên chỉ định số ký tự tối đa có thể được nhập vào trường mật khẩu.

Ví dụ

Hãy để chúng tôi xem xét một ví dụ cho thuộc tính biểu mẫu maxLength -

<!DOCTYPE html>
<html>
<body>
<h1>Input Password maxLength Property</h1>
Password: <input type="password" id="PASS" maxLength="5">
<p>Increase the maximum number of characters to be entered for the above field by clicking below button</p>
<button onclick="changeMax()">CHANGE LENGTH</button>
<p id="Sample"></p>
<script>
   function changeMax() {
      document.getElementById("PASS").maxLength = "15";
      document.getElementById("Sample").innerHTML = "Maximum number of characters are now increased to 15";
   }
</script>
</body>
</html>

Đầu ra

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

HTML DOM Input Password maxLength Thuộc tính

Khi nhấp vào THAY ĐỔI CHIỀU DÀI và nhập thêm ký tự -

HTML DOM Input Password maxLength Thuộc tính

Trong ví dụ trên

Đầu tiên, chúng tôi đã tạo một trường mật khẩu đầu vào với id “PASS” và có giá trị thuộc tính maxLength của nó được đặt thành 5. Điều này có nghĩa là chỉ có thể nhập 5 ký tự vào trường này.

Password: <input type="password" id="PASS" maxLength=”5”>

Sau đó, chúng tôi đã tạo một nút THAY ĐỔI CHIỀU DÀI sẽ thực thi phương thức changeMax () khi người dùng nhấp vào -

<button type="button" onclick="changeMax()">CHANGE LENGTH</button>

Phương thức changeMax () 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 maxLength thành 15. Sau đó, chúng tôi hiển thị thay đổi này bằng cách hiển thị thông báo trong đoạn có id “Sample” bằng thuộc tính innerHTML của nó -

function changeMax() {
   document.getElementById("PASS").maxLength = "15";
   document.getElementById("Sample").innerHTML = "Maximum number of characters are now increased to 15";
}