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 Number readOnly Property
The HTML DOM Input Number readOnly property sets or returns whether a number input field is read-only. When set to true, the input field becomes non-editable but remains focusable and its value can still be selected and copied.
Syntax
Following is the syntax to return the readOnly property −
object.readOnly
Following is the syntax to set the readOnly property −
object.readOnly = true | false
Property Values
true − The input field is read-only and cannot be modified by the user.
false − The input field is editable (default behavior).
Return Value
The property returns a Boolean value indicating whether the number input field is read-only (true) or editable (false).
Example − Setting Number Input to Read-Only
Following example demonstrates how to make a number input field read-only using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Input Number readOnly Property</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
text-align: center;
}
input[type="number"] {
width: 200px;
padding: 8px;
font-size: 16px;
margin: 10px;
border: 2px solid #ccc;
border-radius: 4px;
}
input[readonly] {
background-color: #f0f0f0;
border-color: #999;
}
button {
padding: 10px 20px;
margin: 5px;
font-size: 14px;
cursor: pointer;
border: none;
border-radius: 4px;
color: white;
}
.read-only { background-color: #dc3545; }
.editable { background-color: #28a745; }
</style>
</head>
<body>
<h2>Input Number readOnly Property Demo</h2>
<p>Enter your age:</p>
<input type="number" id="ageInput" placeholder="Enter age" min="1" max="120">
<br><br>
<button onclick="makeReadOnly()" class="read-only">Make Read Only</button>
<button onclick="makeEditable()" class="editable">Make Editable</button>
<p id="status">Status: Editable</p>
<script>
function makeReadOnly() {
var input = document.getElementById("ageInput");
input.readOnly = true;
document.getElementById("status").textContent = "Status: Read-Only";
}
function makeEditable() {
var input = document.getElementById("ageInput");
input.readOnly = false;
document.getElementById("status").textContent = "Status: Editable";
}
</script>
</body>
</html>
The example shows a number input field with buttons to toggle between read-only and editable states. The visual appearance changes when the field becomes read-only.
Example − Checking readOnly Status
Following example demonstrates how to check and display the current readOnly status −
<!DOCTYPE html>
<html>
<head>
<title>Check readOnly Status</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Check Input Number readOnly Status</h2>
<input type="number" id="numberInput" value="42" style="padding: 8px; font-size: 16px; margin: 10px;">
<br><br>
<button onclick="toggleReadOnly()" style="padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">Toggle Read-Only</button>
<button onclick="checkStatus()" style="padding: 10px 20px; background-color: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer; margin-left: 10px;">Check Status</button>
<p id="result"></p>
<script>
function toggleReadOnly() {
var input = document.getElementById("numberInput");
input.readOnly = !input.readOnly;
checkStatus();
}
function checkStatus() {
var input = document.getElementById("numberInput");
var status = input.readOnly ? "Read-Only" : "Editable";
document.getElementById("result").innerHTML =
"<strong>Current Status: " + status + "</strong><br>" +
"readOnly property value: " + input.readOnly;
}
</script>
</body>
</html>
This example allows you to toggle the readOnly state and check the current status of the input field.
Example − Form Validation with readOnly
Following example shows how to use readOnly property in form validation scenarios −
<!DOCTYPE html>
<html>
<head>
<title>Form with readOnly Fields</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Order Form</h2>
<form>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" value="1" min="1" onchange="calculateTotal()" style="padding: 5px; margin: 5px;"><br><br>
<label for="price">Unit Price:</label>
<input type="number" id="price" value="25.99" step="0.01" onchange="calculateTotal()" style="padding: 5px; margin: 5px;"><br><br>
<label for="total">Total Amount:</label>
<input type="number" id="total" readonly style="padding: 5px; margin: 5px; background-color: #f5f5f5;"><br><br>
<button type="button" onclick="lockFields()" style="padding: 8px 16px; background-color: #ffc107; border: none; border-radius: 4px; cursor: pointer;">Lock All Fields</button>
<button type="button" onclick="unlockFields()" style="padding: 8px 16px; background-color: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; margin-left: 10px;">Unlock Fields</button>
</form>
<script>
function calculateTotal() {
var quantity = document.getElementById("quantity").value;
var price = document.getElementById("price").value;
var total = (quantity * price).toFixed(2);
document.getElementById("total").value = total;
}
function lockFields() {
document.getElementById("quantity").readOnly = true;
document.getElementById("price").readOnly = true;
}
function unlockFields() {
document.getElementById("quantity").readOnly = false;
document.getElementById("price").readOnly = false;
}
// Calculate initial total
calculateTotal();
</script>
</body>
</html>
This example demonstrates a practical use case where the total field is always read-only, while other fields can be locked or unlocked based on user actions.
Key Points
The readOnly property only prevents user input but does not disable the field completely.
Read-only fields can still receive focus and their values can be selected and copied.
Read-only fields are included in form submissions, unlike disabled fields.
The property can be changed dynamically using JavaScript at runtime.
CSS can be used to style read-only fields differently using the
:read-onlypseudo-class.
Browser Compatibility
The readOnly property for input number elements is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+.
Conclusion
The HTML DOM Input Number readOnly property provides a way to control the editability of number input fields dynamically. It is useful for creating forms where certain fields need to be protected from user modification while remaining part of the form data. The property returns a Boolean value and can be set using JavaScript to toggle between read-only and editable states.
211 Views
