
- HTML Tutorial
- HTML - Home
- HTML - Overview
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Comments
- HTML - Images
- HTML - Tables
- HTML - Lists
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Frames
- HTML - Iframes
- HTML - Blocks
- HTML - Backgrounds
- HTML - Colors
- HTML - Fonts
- HTML - Forms
- HTML - Embed Multimedia
- HTML - Marquees
- HTML - Header
- HTML - Style Sheet
- HTML - Javascript
- HTML - Layouts
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- HTML - Fonts Ref
- HTML - Events Ref
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
HTML DOM Input Password readOnly property
The HTML DOM Input Password readOnly property is used for setting or returning whether the input password field is read-only or not. The readOnly property makes the element non-editable but it can still be focused by tab or by clicking. 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 −
Set the readOnly property −
passwordObject.readOnly = true|false
Here, true represents the password 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 password readOnly property −
<!DOCTYPE html> <html> <body> <h1>password readOnly property</h1> Password: <input type="password" id="PASS1" > <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>
Output
This will produce the following output −
On clicking the CHANGE button. Now you won’t be able to type inside the input password box −
In the above example −
We have first created an input password field with id “PASS1”.
Password: <input type="password" id="PASS1">
We then created a button CHANGE that will execute the changeRead() method on being clicked by the user −
<button onclick="changeRead()">CHANGE</button>
The changeRead() method uses the getElementById() method to get the input element with type password. It then set its readOnly property to true. This means we cannot enter text into the password field now but it still can be focused. The text inside is sent to the server on clicking the submit button −
function changeRead() { document.getElementById("PASS1").readOnly = true; }
- Related Articles
- HTML DOM Input URL readOnly Property
- HTML DOM Input Week readOnly Property
- HTML DOM Input Search readOnly property
- HTML DOM Input Text readOnly property
- HTML DOM Input Month readOnly Property
- HTML DOM Input Number readOnly Property
- HTML DOM Input Date readOnly Property
- HTML DOM Input Datetime readOnly Property
- HTML DOM Input DatetimeLocal readOnly Property
- HTML DOM Input Email readOnly Property
- HTML DOM Input Time readOnly Property
- HTML DOM Input Password autofocus Property
- HTML DOM Input Password defaultValue Property
- HTML DOM Input Password disabled Property
- HTML DOM Input Password form Property
