The DOM Input Time readOnly Property in HTML DOM is used to set or return whether the Time Field should be read-only or not. It means that a user can not modify or changes a content already present in a particular Element (However, a user can tab to it, highlight it, and copy the text from it) whereas a JavaScript can be used to change the read-only value and make the input field editable.
Syntax:
- It is used to return the readOnly property.
timeObject.readOnly
- It is used to set the readOnly property.
timeObject.readOnly = true|false
Property Values:
- true: It defines that Time field is read only.
- false: It defines that Time field is not read only. It is false by default.
Return Value: It returns a boolean value which represent the Time field is read only or not.
Example-1: This example illustrates how to return the property.
<!DOCTYPE html> <html>
<head>
<title>
DOM Input Time readOnly Property
</title>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>
DOM Input Time readOnly Property
</h2>
<label for="uname"
style="color:green">
<b>Enter time</b>
</label>
<input type="time" id="gfg"
placeholder="Enter time"
readonly>
<br>
<br>
<button type="button" onclick="geeks()">
Click
</button>
<p id="GFG"
style="font-size:24px;
color:green;">
</p>
<script>
function geeks() {
var link =
document.getElementById(
"gfg").value;
document.getElementById(
"GFG").innerHTML = link;
}
</script>
</center>
</body>
</html>
|
Output:
Before Clicking On Button:
After Clicking On Button:
Example-2: This Example illustrates how to set the Property.
<!DOCTYPE html> <html>
<head>
<title>
DOM Input Time readOnly Property
</title>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>
DOM Input Time readOnly Property
</h2>
<label for="uname"
style="color:green">
<b>Enter time</b>
</label>
<input type="time" id="gfg"
placeholder="Enter time" step="5"
readonly>
<br>
<br>
<button type="button" onclick="geeks()">
Click
</button>
<p id="GFG"
style="font-size:24px;
color:green'">
</p>
<script>
function geeks() {
var link =
document.getElementById(
"gfg").readOnly = "false";
document.getElementById(
"GFG").innerHTML = link;
}
</script>
</center>
</body>
</html>
|
Output :
Before Clicking On Button :
After Clicking On Button:
Supported Browsers: The browser supported by DOM input Time readOnly property listed below:
- Google Chrome
- Internet Explorer 10.0 +
- Firefox
- Opera
- Safari