HTML DOM Input Search readOnly Property
The Input Search readOnly Property is used to set or return whether a search Field should be read-only or not. A read-only field can’t be changed but can be selected, copied, and tabbed. It reflects the HTML readonly attribute.
Syntax:
- It is used to return the readOnly property
searchObject.readOnly
- It is used to set the readOnly property.
searchObject.readOnly = true|false
Property Values:
Name
| Description
|
---|
true
| It defines that search field is read only.
|
false
| It is the default value. It defines that search field is not read only.
|
Return Value:
It returns a boolean value which represent the search field is read only or not.Â
HTML DOM Input Search readOnly Property Examples
Example 1: In this example we creates a page with a search input field set to read-only. Clicking a button displays the read-only property status.Â
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Input Search readOnly Property
</title>
</head>
<body>
<h2>Input Search readOnly Property</h2>
<form id="myGeeks">
Search:
<input
type="search"
id="test"
placeholder="Type to search.."
/>
</form>
<br /><br />
<button onclick="makeReadOnly()">
Click here
</button>
<p
id="check"
style="font-size: 24px; color: green"
></p>
<script>
function makeReadOnly() {
// Set the readonly property
document.getElementById(
"test"
).readOnly = true;
document.getElementById(
"check"
).innerHTML =
"Search field set to read-only.";
}
</script>
</body>
</html>
Output:Â
Example 2: In this example search input field initially set to read-only. Upon double-clicking the button, it’s toggled to editable, updating a confirmation message.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Input Search readOnly Property
</title>
</head>
<body>
<h2>Input Search readOnly Property</h2>
<form id="myGeeks">
<input
type="Search"
id="test"
placeholder="Type to search.."
readonly
/>
</form>
<br />
<br />
<button ondblclick="Access()">
click here
</button>
<p
id="check"
style="font-size: 24px; color: green"
></p>
<script>
function Access() {
// set Input search readOnly Property
let s = (document.getElementById(
"test"
).readOnly = false);
document.getElementById(
"check"
).innerHTML = s;
}
</script>
</body>
</html>
Output:Â
HTML DOM Input Search readOnly Property Example Output
Supported Browsers:
The browser supported by DOM input search readOnly Property are listed below:
Last Updated :
13 Mar, 2024
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...