Thuộc tính readOnly của HTML DOM Input Password được sử dụng để thiết lập hoặc trả về trường mật khẩu đầu vào có phải là trường chỉ đọc hay không. Thuộc tính readOnly làm cho phần tử không thể chỉnh sửa được nhưng nó vẫn có thể được lấy tiêu điểm theo tab hoặc bằng cách nhấp vào. Nếu có giá trị mặc định bên trong phần tử chỉ đọc thì nó sẽ được gửi đến máy chủ khi gửi.
Cú pháp
Sau đây là cú pháp cho -
Đặt thuộc tính readOnly -
passwordObject.readOnly = true|false
Ở đây, true đại diện cho trường mật khẩu chỉ được đọc trong khi false đại diện cho trường hợp khác. Thuộc tính readOnly được đặt thành false theo mặc định.
Ví dụ
Chúng ta hãy xem một ví dụ cho thuộc tính readOnly của mật khẩu -
<!DOCTYPE html>
<html>
<body>
<h1>password readOnly property</h1>
Password: <input type="password" id="PASS1" >
<p>Change the readOnly property of the above field by clicking the below button</p>
<button onclick="changeRead()">CHANGE</button>
<script>
function changeRead() {
document.getElementById("PASS1").readOnly = true;
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút THAY ĐỔI. Bây giờ bạn sẽ không thể nhập bên trong hộp nhập mật khẩu -
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”.
Password: <input type="password" id="PASS1">
Sau đó, chúng tôi tạo một nút CHANGE sẽ thực thi phương thức changeRead () khi được người dùng nhấp vào -
<button onclick="changeRead()">CHANGE</button>
Phương thức changeRead () 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 thuộc tính readOnly thành true. Điều này có nghĩa là bây giờ chúng ta không thể nhập văn bản vào trường mật khẩu nhưng nó vẫn có thể được lấy tiêu điểm. Văn bản bên trong được gửi đến máy chủ khi nhấp vào nút gửi -
function changeRead() {
document.getElementById("PASS1").readOnly = true;
}