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

Thuộc tính readOnly của HTML DOM Input Password được sử dụng để thiết lập hoặc trả về xem trường nhập mật khẩu có chỉ đọc (read-only) hay không. Thuộc tính readOnly làm cho phần tử không thể chỉnh sửa nhưng vẫn có thể focus bằng tab hoặc click. Nếu có giá trị mặc định trong phần tử read-only thì nó vẫn được gửi lên server khi submit.

Cú pháp

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

passwordObject.readOnly = true|false

Ở đây, true biểu thị trường password chỉ đọc, false ngược lại. Mặc định readOnly là false.

Ví dụ

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

<!DOCTYPE html> <html> <body> 
<h1>Thuộc tính readOnly của password</h1> 
Mật khẩu: <input type="password" id="PASS1" > 
<p>Thay đổi thuộc tính readOnly của trường trên bằng cách nhấn nút dưới đây</p> 
<button onclick="changeRead()">THAY ĐỔI</button> 
<script> 
    function changeRead() { 
        document.getElementById("PASS1").readOnly = true; 
    } 
</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. Bây giờ bạn không thể nhập vào ô mật khẩu:

Trong ví dụ trên:

Chúng ta tạo trường password với id="PASS1":

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

Tạo nút THAY ĐỔI thực thi phương thức changeRead() khi được nhấn:

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

Phương thức changeRead() dùng getElementById() lấy phần tử password và thiết lập readOnly=true. Điều này nghĩa là không thể nhập văn bản vào trường password nhưng vẫn có thể focus. Văn bản bên trong vẫn gửi lên server khi nhấn submit:

function changeRead() { 
    document.getElementById("PASS1").readOnly = true; 
}