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 Month readOnly Property
The HTML DOM Input Month readOnly property controls whether a month input field can be edited by the user. When set to true, the field becomes read-only and users cannot change its value, though the field remains focusable and its value is still included in form submissions.
Syntax
Following is the syntax for returning the readOnly property −
object.readOnly
Following is the syntax for setting the readOnly property −
object.readOnly = true | false
Parameters
The readOnly property accepts the following boolean values −
true − Makes the month input field read-only (user cannot edit)
false − Makes the month input field editable (default behavior)
Return Value
The property returns a boolean value indicating whether the month input field is read-only (true) or editable (false).
Example − Making Month Input Read-Only
Following example demonstrates how to make a month input field read-only using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Input Month ReadOnly Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Month Input ReadOnly Demo</h2>
<p>Select your birth month:</p>
<input type="month" id="birthMonth" value="2024-06" style="padding: 8px; margin: 10px;">
<br><br>
<button onclick="makeReadOnly()" style="padding: 10px 20px; margin: 5px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">Make Read Only</button>
<button onclick="makeEditable()" style="padding: 10px 20px; margin: 5px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer;">Make Editable</button>
<p id="status">Current status: Editable</p>
<script>
function makeReadOnly() {
var monthInput = document.getElementById("birthMonth");
monthInput.readOnly = true;
document.getElementById("status").textContent = "Current status: Read-Only";
}
function makeEditable() {
var monthInput = document.getElementById("birthMonth");
monthInput.readOnly = false;
document.getElementById("status").textContent = "Current status: Editable";
}
</script>
</body>
</html>
The output shows a month input field with buttons to toggle between read-only and editable states. When read-only, the field cannot be changed but remains focusable −
Month Input ReadOnly Demo Select your birth month: [June 2024] [Make Read Only] [Make Editable] Current status: Editable
Example − Checking ReadOnly Status
Following example shows how to check and display the current readOnly status of a month input −
<!DOCTYPE html>
<html>
<head>
<title>Check ReadOnly Status</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Check Month Input ReadOnly Status</h2>
<label for="eventMonth">Event Month:</label>
<input type="month" id="eventMonth" value="2024-12" style="padding: 8px; margin: 10px;">
<br><br>
<button onclick="toggleReadOnly()" style="padding: 10px 20px; margin: 5px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer;">Toggle ReadOnly</button>
<button onclick="checkStatus()" style="padding: 10px 20px; margin: 5px; background: #17a2b8; color: white; border: none; border-radius: 4px; cursor: pointer;">Check Status</button>
<p id="result"></p>
<script>
function toggleReadOnly() {
var monthInput = document.getElementById("eventMonth");
monthInput.readOnly = !monthInput.readOnly;
checkStatus();
}
function checkStatus() {
var monthInput = document.getElementById("eventMonth");
var isReadOnly = monthInput.readOnly;
document.getElementById("result").innerHTML =
"<strong>ReadOnly Status:</strong> " + isReadOnly +
"<br><strong>Field is:</strong> " + (isReadOnly ? "Read-Only" : "Editable");
}
</script>
</body>
</html>
The output demonstrates how to programmatically check and toggle the readOnly property −
Check Month Input ReadOnly Status Event Month: [December 2024] [Toggle ReadOnly] [Check Status] ReadOnly Status: false Field is: Editable
Practical Use Case
Following example shows a practical scenario where the readOnly property is used in a form with conditional editing −
<!DOCTYPE html>
<html>
<head>
<title>Conditional ReadOnly Month Input</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Employee Information Form</h2>
<form style="max-width: 400px;">
<label>
<input type="checkbox" id="editMode"> Enable Edit Mode
</label>
<br><br>
<label for="joinMonth">Joining Month:</label><br>
<input type="month" id="joinMonth" value="2023-01" readonly style="padding: 8px; width: 200px; margin-bottom: 10px;">
<br>
<label for="reviewMonth">Next Review Month:</label><br>
<input type="month" id="reviewMonth" value="2024-07" readonly style="padding: 8px; width: 200px; margin-bottom: 10px;">
<br><br>
<button type="button" onclick="saveData()" style="padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">Save</button>
</form>
<p id="message"></p>
<script>
document.getElementById("editMode").addEventListener("change", function() {
var joinMonth = document.getElementById("joinMonth");
var reviewMonth = document.getElementById("reviewMonth");
var isChecked = this.checked;
joinMonth.readOnly = !isChecked;
reviewMonth.readOnly = !isChecked;
});
function saveData() {
var joinMonth = document.getElementById("joinMonth").value;
var reviewMonth = document.getElementById("reviewMonth").value;
document.getElementById("message").innerHTML =
"<strong>Data Saved:</strong><br>Joining Month: " + joinMonth +
"<br>Review Month: " + reviewMonth;
}
</script>
</body>
</html>
The output shows month input fields that become editable only when "Enable Edit Mode" is checked −
Employee Information Form ? Enable Edit Mode Joining Month: [January 2023] (read-only, grayed out) Next Review Month: [July 2024] (read-only, grayed out) [Save]
Key Points
The
readOnlyproperty accepts boolean values:trueorfalseA read-only month input field cannot be edited but remains focusable and participates in form submission
This property is different from the
disabledproperty - disabled fields are not focusable and don't submit their valuesThe readOnly state can be toggled dynamically using JavaScript
Read-only fields are useful for displaying data that shouldn't be modified under certain conditions
Conclusion
The HTML DOM Input Month readOnly property provides control over whether users can edit month input fields. It's particularly useful for creating forms with conditional editing capabilities, where certain fields should be protected from modification based on user permissions or application state.
187 Views
