Thuộc tính placeholder của Input Password trong HTML DOM

Thuộc tính placeholder của HTML DOM Input Password được sử dụng để thiết lập hoặc trả về giá trị thuộc tính placeholder của trường nhập mật khẩu. Thuộc tính này cung cấp gợi ý cho người dùng về trường nhập liệu bằng cách hiển thị một văn bản bên trong trường nhập trước khi người dùng nhập bất kỳ nội dung nào. Văn bản placeholder mặc định có màu xám và không được gửi đi cùng form (khác với thuộc tính value).

Cú pháp

Cú pháp để thiết lập thuộc tính placeholder:

passwordObject.placeholder = text

Ở đây, text đại diện cho văn bản placeholder chỉ định gợi ý cho người dùng về trường mật khẩu.

Ví dụ

Ví dụ minh họa cho thuộc tính placeholder của Input Password:

<!DOCTYPE html> <html> <body> 
<h1>Thuộc tính placeholder của password</h1> 
Mật khẩu: <input type="password" id="PASS1" placeholder="...."> 
<p>Thay đổi văn bản placeholder của trường trên bằng cách nhấn nút dưới đây</p> 
<button onclick="changeHolder()">THAY ĐỔI</button> 
<script> 
    function changeHolder() { 
        document.getElementById("PASS1").placeholder = "Nhập mật khẩu của bạn tại đây.."; 
    } 
</script> </body> </html>

Kết quả

Đoạn mã trên sẽ tạo ra kết quả như sau:

Khi nhấn nút THAY ĐỔI:

Trong ví dụ trên:

Chúng ta đã tạo một trường nhập mật khẩu với id "PASS1" và giá trị thuộc tính placeholder là "....".

Mật khẩu: <input type="password" id="PASS1" placeholder="....">

Sau đó tạo nút THAY ĐỔI sẽ thực thi phương thức changeHolder() khi được nhấn:

<button onclick="changeHolder()">THAY ĐỔI</button>

Phương thức changeHolder() sử dụng getElementById() để lấy phần tử nhập mật khẩu và thiết lập giá trị thuộc tính placeholder thành "Nhập mật khẩu của bạn tại đây..":

function changeHolder() { 
    document.getElementById("PASS1").placeholder = "Nhập mật khẩu của bạn tại đây.."; 
}