Thuộc tính readOnly số đầu vào HTML DOM trả về và sửa đổi xem trường số đầu vào là chỉ đọc hay không trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
-
Trả lại readOnly
object.readOnly
-
Đang sửa đổi readOnly
object.readOnly = true | false
Ví dụ
Hãy để chúng tôi xem một ví dụ về thuộc tính readOnly của số đầu vào -
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
text-align:center;
color:#fff;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
height:100%;
}
p{
font-weight:700;
font-size:1.1rem;
}
input{
display:block;
width:35%;
border:2px solid #fff;
background-color:transparent;
color:#fff;
font-weight:bold;
padding:8px;
margin:1rem auto;
outline:none;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
</style>
</head>
<body>
<h1>DOM Input number readOnly property Demo</h1>
<p>Hi, Select your day of birth?</p>
<input type="number" class="numberInput">
<button onclick="rFunction()" class="btn">Read Only</button>
<button onclick="rWFunction()" class="btn">Read & Write</button>
<script>
function rFunction() {
var monthInput = document.querySelector(".numberInput");
monthInput.readOnly =true;
}
function rWFunction(){
var monthInput = document.querySelector(".numberInput");
monthInput.readOnly =false;
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào “ Chỉ đọc ”Và sau đó là“ Đọc &Viết ”Để hiểu cách hoạt động của thuộc tính readOnly.
