Thuộc tính chỉ đọc đầu vào HTML được sử dụng để khai báo một phần tử đầu vào là không thể sửa đổi, mặc dù nó vẫn có thể được sao chép.
Hãy để chúng tôi xem ví dụ về Chỉ đọc đầu vào tài sản -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>Input Email readOnly</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Email-readOnly</legend>
<label for="EmailSelect">Contact Us :
<input type="email" id="EmailSelect" onclick="showErrorMsg()" value="infoHelpDesk@MNC.com" readOnly>
</label>
<input type="button" onclick="showMessage()" value="Copy Email Id">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputEmail = document.getElementById("EmailSelect");
divDisplay.textContent = 'Above email is read-only';
function showMessage() {
inputEmail.select();
document.execCommand('copy');
divDisplay.textContent = 'Email Copied: '+inputEmail.value;
}
function showErrorMsg(){
divDisplay.textContent +=', This cannot be edited.'
}
</script>
</body>
</html> Điều này sẽ tạo ra kết quả sau -
1) Trước khi nhấp vào ‘ Sao chép Id Email Nút '-
2) Nhấp vào ‘ Liên hệ với chúng tôi Trường email -
3) Nhấp vào ‘ Sao chép Id Email ’-
