Thuộc tính trình giữ chỗ Mật khẩu nhập DOM HTML

Thuộc tính trình giữ chỗ Mật khẩu đầu vào HTML DOM được sử dụng để thiết lập hoặc trả về giá trị thuộc tính trình giữ chỗ của trường mật khẩu đầu vào. Thuộc tính trình giữ chỗ được sử dụng để cung cấp cho người dùng trang web gợi ý về phần tử đầu vào bằng cách hiển thị văn bản bên trong trường nhập cho người dùng nhập bất kỳ thứ gì. Văn bản trình giữ chỗ có màu xám theo mặc định và không được gửi đến biểu mẫu không giống như thuộc tính value.

Cú pháp

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

Đặt thuộc tính trình giữ chỗ -

passwordObject.placeholder = text

Ở đây, văn bản đại diện cho văn bản trình giữ chỗ chỉ định gợi ý cho người dùng về 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 Trình giữ chỗ Mật khẩu đầu vào -

<!DOCTYPE html>
<html>
<body>
<h1>password placeholder property</h1>
Password: <input type="password" id="PASS1" placeholder="....">
<p>Change the placeholder text of the above field by clicking the below button</p>
<button onclick="changeHolder()">CHANGE</button>
<script>
   function changeHolder() {
      document.getElementById("PASS1").placeholder = "Enter your password here..";
   }
</script>
</body>
</html>

Đầu ra

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

Thuộc tính trình giữ chỗ Mật khẩu nhập DOM HTML

Khi nhấp vào nút THAY ĐỔI -

Thuộc tính trình giữ chỗ Mật khẩu nhập DOM HTML

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 “PASS1” và giá trị thuộc tính trình giữ chỗ được đặt thành “….”.

Password: <input type="password" id="PASS1" placeholder="....">

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

<button onclick="changeHolder()">CHANGE</button>

ChangeHolder () sử dụng phương thức getElementById () để lấy phần tử đầu vào có kiểu mật khẩu. Sau đó, nó đặt giá trị thuộc tính trình giữ chỗ thành “Nhập mật khẩu của bạn vào đây ..” được phản ánh trong trường mật khẩu -

function changeHolder() {
   document.getElementById("PASS1").placeholder = "Enter your password here..";
}