HTML DOM Input Search Readonly Property

HTML Web Development Front End Technology

The HTML DOM Input Search readOnly property is used for setting or returning if the input search 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 server on submit.

Syntax

Following is the syntax for −

Setting the readOnly property −

searchObject.readOnly = true|false

Here, true represents the search 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 Search readOnly property −

<!DOCTYPE html>
<html>
<body>
<h1>Search readOnly property</h1>
<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits">
</form>
<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("PASS1").readOnly = true;
   }
</script>
</body>
</html>