HTML DOM Input Search readOnly property

HTMLWeb DevelopmentFront 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.


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.


Let us look at an example for the Search readOnly property −

<!DOCTYPE html>
<h1>Search readOnly property</h1>
FRUITS: <input type="search" id="SEARCH1" name="fruits">
<p>Change the readOnly property of the above field by clicking the below button</p>
<button onclick="changeRead()">CHANGE</button>
   function changeRead() {
      document.getElementById("PASS1").readOnly = true;


This will produce the following output −

On clicking the CHANGE button −

Updated on 19-Aug-2019 10:11:11