HTML input readonly Attribute


The HTML input readonly attribute is used to declare an input element unmodifiable, though it still may be copied.

Let us see an example of Input readOnly property −

Example

 Live Demo

<!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>

This will produce the following output −

1) Before clicking ‘Copy Email Id’ button −

2) Clicking ‘Contact Us’ email field −

3) Clicking ‘Copy Email Id’ −

Updated on: 19-Sep-2019

183 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements