HTML DOM Input Text readOnly property



The HTML DOM Input Text readOnly property is used for setting or returning if the input text field is read-only or not. The readOnly property makes the element non-editable but it can still be focused by tab or click. If there is a default value inside a read-only element then it is sent to a server on submit.

Syntax

Following is the syntax for βˆ’

Setting the readOnly property βˆ’

textObject.readOnly = true|false

Here, truly represents the text field is read-only while false represents otherwise. The readOnly property is set to false by default.

Example

Let us look at an example for the Input Text readOnly property βˆ’

<!DOCTYPE html>
<html>
<body>
<h1>Input Text readOnly property</h1>
USERNAME: <input type="text" id="USR" >
<p>Change the readOnly property of the above field by clicking the below button</p>
<button onclick="changeRead()">CHANGE</button>
<script>
   function changeRead() {
      document.getElementById("USR").readOnly = true;
   }
</script>
</body>
</html>

Output

This will produce the following output βˆ’

On clicking the CHANGE button you can’t change the text now and it will be submitted to the server on submit βˆ’

Updated on: 2019-08-19T12:36:03+05:30

481 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements