Input type text property readOnly in Javascript

The Input type text property readOnly used to set and retrieve whether the text input field is read only. It returns a boolean value true, if the form input field text is read only, otherwise false.

Syntax

 1 <input>.readOnly // to retrieve
 2 <input>.readOnly = <boolean> // to set

input : An input type text element object to set and retrieve readOnly property

boolean : It specifies whether the text input field is read only or editable

Possible values

1. true : It specifies that the text input field should be read only2. false : It specifies that the text input field should be editable, it is default, if not specified

Input text property readOnly

 1 <!DOCTYPE html>
 2 <html>
 3 <style>
 4   .container {
 5     margin: 20px 0;
 6   }
 7 </style>
 8 <body>
 9 	<h1>The Input Text Object</h1>
 10 	<h2>Example</h2>
 11 	
 12 	<div class="container">
 13 	  <input type="text" id="text" placeholder="username" />
 14 	</div>
 15 	<div>
 16 	  <button onclick="readOnly(true)">Read only</button>
 17 	  <button onclick="readOnly(false)">Editable</button>
 18 	  <button onclick="access()">Access</button>	  
 19 	</div>	
 20 		
 21 	<p id="result"></p>
 22 	<script>
 23 	function access() {
 24 	  const element = document.getElementById("text");
 25 	  const str = `Is text field is readOnly ? <b>${element.readOnly}</b>`;
 26 	  document.getElementById("result").innerHTML = str;
 27 	}
 28 	function readOnly(value) {
 29 	  const element = document.getElementById("text");
 30 	  element.readOnly = value;
 31 	}
 32 	</script>
 33 </body>
 34 </html>