HTML DOM Input Email readOnly Property

HTMLWeb DevelopmentFront End Technology

The HTML DOM Input Email readOnly property sets/returns whether Input Email can be modified or not.

Syntax

Following is the syntax −

  • Returning boolean value - true/false
inputEmailObject.readOnly
  • Setting readOnlyto booleanValue
inputEmailObject.readOnly = booleanValue

Boolean Values

Here, “booleanValue” can be the following −

booleanValueDetails
trueIt defines that the input email field is readOnly.
falseIt defines that the input email field is not readOnly and can be modified.

Example

Let us see an example of Input Email readOnly property −

 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>

Output

This will produce the following output −

Before clicking ‘Copy Email Id’ button −

Clicking ‘Contact Us’ email field −

Clicking ‘Copy Email Id’

raja
Published on 24-Jul-2019 15:21:17
Advertisements