Computer >> Máy Tính >  >> Lập trình >> HTML

Thuộc tính chỉ đọc đầu vào HTML

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="[email protected]" 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 '-

Thuộc tính chỉ đọc đầu vào HTML

2) Nhấp vào ‘ Liên hệ với chúng tôi Trường email -

Thuộc tính chỉ đọc đầu vào HTML

3) Nhấp vào ‘ Sao chép Id Email ’-

Thuộc tính chỉ đọc đầu vào HTML