Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Input Time readOnly Property
The HTML DOM Input Time readOnly property sets or returns whether an Input Time field can be modified by the user. When set to true, the input becomes read-only and displays a grayed-out appearance, preventing user interaction while still allowing programmatic access.
Syntax
Following is the syntax for getting the readOnly property value −
inputTimeObject.readOnly
Following is the syntax for setting the readOnly property −
inputTimeObject.readOnly = booleanValue
Return Value
The readOnly property returns a Boolean value −
- true − If the time input field is read-only
- false − If the time input field is editable
Parameters
The readOnly property accepts a booleanValue parameter −
| Value | Description |
|---|---|
| true | Makes the input time field read-only (user cannot modify the value) |
| false | Makes the input time field editable (default behavior) |
Example − Getting readOnly Property
Following example demonstrates how to check if a time input is read-only −
<!DOCTYPE html>
<html>
<head>
<title>Check Time Input readOnly</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Check Time Input readOnly Status</h2>
<label for="timeField">Meeting Time:</label>
<input type="time" id="timeField" value="14:30" readOnly>
<button onclick="checkReadOnly()">Check Status</button>
<p id="result"></p>
<script>
function checkReadOnly() {
var timeInput = document.getElementById("timeField");
var isReadOnly = timeInput.readOnly;
var message = isReadOnly ? "The time field is read-only" : "The time field is editable";
document.getElementById("result").textContent = message;
}
</script>
</body>
</html>
The output shows the read-only status when the button is clicked −
Meeting Time: [14:30] [Check Status] The time field is read-only
Example − Setting readOnly Property
Following example shows how to dynamically toggle the readOnly property −
<!DOCTYPE html>
<html>
<head>
<title>Toggle Time Input readOnly</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Toggle Time Input Editing</h2>
<label for="appointmentTime">Appointment Time:</label>
<input type="time" id="appointmentTime" value="09:15">
<button onclick="toggleReadOnly()">Toggle Edit Mode</button>
<p id="status"></p>
<script>
function toggleReadOnly() {
var timeInput = document.getElementById("appointmentTime");
timeInput.readOnly = !timeInput.readOnly;
var statusText = timeInput.readOnly ? "Read-only mode: Cannot edit" : "Edit mode: Can modify time";
document.getElementById("status").textContent = statusText;
}
// Show initial status
window.onload = function() {
var timeInput = document.getElementById("appointmentTime");
var statusText = timeInput.readOnly ? "Read-only mode: Cannot edit" : "Edit mode: Can modify time";
document.getElementById("status").textContent = statusText;
};
</script>
</body>
</html>
The output allows toggling between editable and read-only states −
Appointment Time: [09:15] [Toggle Edit Mode] Edit mode: Can modify time
Example − Form Validation with readOnly
Following example demonstrates using readOnly for form control based on user selection −
<!DOCTYPE html>
<html>
<head>
<title>Form Control with readOnly</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Meeting Scheduler</h2>
<label>
<input type="checkbox" id="fixedTime" onchange="toggleTimeEdit()">
Use fixed meeting time
</label>
<br><br>
<label for="meetingTime">Meeting Time:</label>
<input type="time" id="meetingTime" value="10:00">
<br><br>
<button onclick="submitForm()">Schedule Meeting</button>
<p id="message"></p>
<script>
function toggleTimeEdit() {
var checkbox = document.getElementById("fixedTime");
var timeInput = document.getElementById("meetingTime");
if (checkbox.checked) {
timeInput.value = "14:00";
timeInput.readOnly = true;
} else {
timeInput.readOnly = false;
}
}
function submitForm() {
var timeInput = document.getElementById("meetingTime");
var message = "Meeting scheduled at " + timeInput.value;
message += timeInput.readOnly ? " (fixed time)" : " (custom time)";
document.getElementById("message").textContent = message;
}
</script>
</body>
</html>
When the checkbox is selected, the time field becomes read-only with a fixed value −
? Use fixed meeting time Meeting Time: [14:00] [Schedule Meeting] Meeting scheduled at 14:00 (fixed time)
Key Points
- Visual Indication − Read-only time inputs appear with a grayed-out style to indicate they cannot be modified
- Form Submission − Read-only inputs are still included in form submissions, unlike disabled inputs
- JavaScript Access − The value can still be read and modified programmatically via JavaScript
- Focus Behavior − Read-only inputs can receive focus but cannot be edited by the user
- Validation − Read-only fields are not subject to HTML5 validation constraints
Conclusion
The readOnly property provides a way to control user interaction with time input fields while maintaining their values in form submissions. It's particularly useful for creating conditional forms, displaying calculated values, or implementing approval workflows where certain fields should be temporarily non-editable.
181 Views
