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.
1 <input>.readOnly
2 <input>.readOnly = <boolean>
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 only |
2. | 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>
Input text property readOnly
Related options for your search