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 URL readOnly Property
The HTML DOM Input URL readOnly property sets or returns whether a URL input field can be modified by the user. When set to true, the input becomes read-only and cannot be edited, though its value can still be accessed and copied programmatically.
Syntax
Following is the syntax for getting the readOnly property value −
inputURLObject.readOnly
Following is the syntax for setting the readOnly property −
inputURLObject.readOnly = booleanValue
Parameters
The booleanValue parameter can be one of the following −
| Value | Description |
|---|---|
true |
Makes the input URL field read-only (cannot be modified by user) |
false |
Makes the input URL field editable (default behavior) |
Return Value
The property returns a Boolean value −
-
true− if the URL input field is read-only -
false− if the URL input field is editable
Example − Basic ReadOnly Usage
Following example demonstrates setting and getting the readOnly property −
<!DOCTYPE html>
<html>
<head>
<title>Input URL readOnly Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>URL Input ReadOnly Property</h3>
<label for="websiteURL">Website URL:</label>
<input type="url" id="websiteURL" value="https://www.tutorialspoint.com" style="width: 300px; padding: 5px;">
<br><br>
<button onclick="makeReadOnly()">Make Read-Only</button>
<button onclick="makeEditable()">Make Editable</button>
<button onclick="checkStatus()">Check Status</button>
<br><br>
<div id="status" style="background: #f0f0f0; padding: 10px; border-radius: 4px;">Status will appear here</div>
<script>
var urlInput = document.getElementById("websiteURL");
var status = document.getElementById("status");
function makeReadOnly() {
urlInput.readOnly = true;
status.textContent = "URL input is now read-only";
status.style.background = "#ffe6e6";
}
function makeEditable() {
urlInput.readOnly = false;
status.textContent = "URL input is now editable";
status.style.background = "#e6ffe6";
}
function checkStatus() {
var isReadOnly = urlInput.readOnly;
status.textContent = "ReadOnly property value: " + isReadOnly;
status.style.background = "#e6f3ff";
}
</script>
</body>
</html>
Click the buttons to toggle between read-only and editable states. The status div shows the current state of the readOnly property.
Example − ReadOnly with Form Validation
Following example shows a practical use case where certain URL fields are made read-only based on user permissions −
<!DOCTYPE html>
<html>
<head>
<title>URL ReadOnly Form Example</title>
<style>
.form-container {
max-width: 500px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
}
.readonly-field {
background-color: #f5f5f5;
color: #666;
}
input[type="url"] {
width: 100%;
padding: 8px;
margin: 5px 0 15px 0;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
background: #007bff;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="form-container">
<h3>Website Configuration</h3>
<label for="primaryURL">Primary Website URL (Admin Only):</label>
<input type="url" id="primaryURL" value="https://www.company.com" readonly>
<label for="blogURL">Blog URL:</label>
<input type="url" id="blogURL" value="https://blog.company.com">
<label for="supportURL">Support URL:</label>
<input type="url" id="supportURL" value="https://support.company.com">
<button onclick="toggleAdminMode()">Toggle Admin Mode</button>
<button onclick="showValues()">Show All URLs</button>
<div id="output" style="margin-top: 15px; padding: 10px; background: #f9f9f9; border-radius: 4px;">
Admin Mode: OFF - Primary URL is read-only
</div>
</div>
<script>
var isAdmin = false;
var primaryURL = document.getElementById("primaryURL");
var blogURL = document.getElementById("blogURL");
var supportURL = document.getElementById("supportURL");
var output = document.getElementById("output");
function toggleAdminMode() {
isAdmin = !isAdmin;
primaryURL.readOnly = !isAdmin;
if (isAdmin) {
output.textContent = "Admin Mode: ON - Primary URL is now editable";
primaryURL.classList.remove("readonly-field");
} else {
output.textContent = "Admin Mode: OFF - Primary URL is read-only";
primaryURL.classList.add("readonly-field");
}
}
function showValues() {
var result = "Current URLs:<br>";
result += "Primary: " + primaryURL.value + " (ReadOnly: " + primaryURL.readOnly + ")<br>";
result += "Blog: " + blogURL.value + " (ReadOnly: " + blogURL.readOnly + ")<br>";
result += "Support: " + supportURL.value + " (ReadOnly: " + supportURL.readOnly + ")";
output.innerHTML = result.replace(/<br>/g, "<br>");
}
// Initialize readonly styling
primaryURL.classList.add("readonly-field");
</script>
</body>
</html>
This example shows how readOnly can be used to control field access based on user permissions. The primary URL field toggles between read-only and editable modes.
Example − Copy URL Functionality
Following example demonstrates a common use case where read-only URL fields allow copying but prevent editing −
<!DOCTYPE html>
<html>
<head>
<title>Copy URL Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<fieldset style="max-width: 600px; padding: 20px;">
<legend>Contact Information</legend>
<label for="websiteURL">Our Website:</label>
<input type="url" id="websiteURL" value="https://www.tutorialspoint.com"
readonly onclick="showMessage()" style="width: 300px; padding: 8px; background: #f9f9f9;">
<button onclick="copyURL()" style="margin-left: 10px; padding: 8px 12px;">Copy URL</button>
<div id="message" style="margin-top: 15px; padding: 10px; background: #e6f3ff; border-radius: 4px;">
This URL is read-only for security
</div>
</fieldset>
<script>
var urlInput = document.getElementById("websiteURL");
var messageDiv = document.getElementById("message");
function showMessage() {
messageDiv.textContent = "This field cannot be edited - it's read-only";
messageDiv.style.background = "#ffe6e6";
}
function copyURL() {
urlInput.select();
urlInput.setSelectionRange(0, 99999); // For mobile devices
try {
document.execCommand('copy');
messageDiv.textContent = "URL copied to clipboard: " + urlInput.value;
messageDiv.style.background = "#e6ffe6";
} catch (err) {
messageDiv.textContent = "Copy failed. Please copy manually.";
messageDiv.style.background = "#ffe6e6";
}
// Clear selection
urlInput.setSelectionRange(0, 0);
}
</script>
</body>
</html>
The output shows a read-only URL field that cannot be edited but allows copying. Clicking the field shows a warning message, and the copy button copies the URL to the clipboard −
Contact Information Our Website: https://www.tutorialspoint.com [Copy URL] This URL is read-only for security
Key Points
Here are important points about the readOnly property −
- User Interaction − Read-only fields can still receive focus and allow text selection, but prevent user input.
- Form Submission − Unlike disabled fields, read-only fields are included in form submissions.
- JavaScript Access − The field value can still be modified programmatically using JavaScript.
- Validation − Read-only fields are not subject to client-side validation constraints.
- Styling − Browsers typically apply different styling to read-only fields (usually grayed out background).
Conclusion
The readOnly property provides control over user input while maintaining field functionality for copying, form submission, and programmatic access. It is commonly used for displaying reference data, system-generated values, or fields that require special permissions to modify.
169 Views
