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
How to Make the Text Input Non-Editable
In an HTML document, the <input> tag is used to represent a form input control. In most cases, the input tag is used within the <form> element to declare input controls that allow users to enter data. Depending on the type attribute, an input field can be of various types.
The input tag is a self-closing element with only attributes. Labels for the input element can be defined using the <label> tag. By setting the appropriate type attribute, it can be used to represent text fields, checkboxes, dropdowns, buttons, and other inputs. The value attribute is used to specify the input element's initial value.
Basic Text Input Syntax
Following is the syntax for a basic text input
<input type="text" value="initial text" />
Example
The following code is a simple example of a text input
<!DOCTYPE html> <html> <head> <title>Text Input in HTML</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <label for="textInput">Sample Text Input:</label> <input type="text" id="textInput" value="This is the initial text"> </body> </html>
Even though the initial text is already specified using the value attribute, it can still be edited. In this tutorial, we will discuss three methods to make the text of the input element non-editable.
Method 1: Using the "readonly" Attribute
In HTML, the readonly attribute of the <input> element specifies that the input field is read-only. When an input is marked as read-only, its content cannot be changed, but it can be copied and highlighted.
The readonly attribute can be used to prevent a user from changing the value until certain conditions are met (like selecting a checkbox, etc.). The readonly attribute can then be removed and the input field made editable using JavaScript.
Syntax
<input type="text" value="text" readonly>
Example Basic Readonly Input
In this example, we use the readonly attribute inside the input element to make the text input non-editable
<!DOCTYPE html>
<html>
<head>
<title>Readonly Text Input</title>
<style>
.container {
padding: 20px;
background-color: #f0f8f0;
border-radius: 8px;
margin: 10px 0;
}
.readonly-input {
padding: 8px;
font-size: 16px;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f9f9f9;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<div class="container">
<p>The text field contains non-editable text. However, the text can be copied or highlighted.</p>
<input type="text" class="readonly-input" value="Non-Editable Text" readonly>
</div>
</body>
</html>
The output displays a text input that cannot be edited but allows text selection and copying
The text field contains non-editable text. However, the text can be copied or highlighted. [Non-Editable Text] (grayed out input field)
Example Dynamic Readonly Control
In this example, we will use JavaScript to dynamically enable or disable the readonly attribute
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Readonly Control</title>
<style>
.container {
padding: 20px;
background-color: #fff8e1;
border-radius: 8px;
margin: 20px 0;
}
#textInput {
padding: 10px;
font-size: 16px;
border: 2px solid #ddd;
border-radius: 4px;
margin-bottom: 15px;
}
.btn {
padding: 10px 20px;
margin: 5px;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}
.enable-btn {
background-color: #4caf50;
color: white;
}
.disable-btn {
background-color: #f44336;
color: white;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<div class="container">
<input type="text" id="textInput" value="Click a button to change editing mode" /><br>
<button class="btn enable-btn" onclick="enableEdit()">Enable Editing</button>
<button class="btn disable-btn" onclick="disableEdit()">Disable Editing</button>
</div>
<script>
function enableEdit() {
var input = document.getElementById("textInput");
input.removeAttribute("readonly");
input.value = "The text can now be edited.";
}
function disableEdit() {
var input = document.getElementById("textInput");
input.setAttribute("readonly", true);
input.value = "This text is non-editable";
}
</script>
</body>
</html>
Clicking the buttons toggles the readonly state of the input field dynamically.
Method 2: Using the "disabled" Attribute
The disabled attribute makes an input field completely inactive. Unlike readonly, a disabled input cannot be focused, selected, or submitted with forms. The text appears grayed out and cannot be copied.
Syntax
<input type="text" value="text" disabled>
Example
<!DOCTYPE html>
<html>
<head>
<title>Disabled Text Input</title>
<style>
.comparison {
padding: 20px;
background-color: #f5f5f5;
border-radius: 8px;
margin: 10px 0;
}
input {
display: block;
margin: 10px 0;
padding: 8px;
font-size: 16px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<div class="comparison">
<p><strong>Readonly Input:</strong></p>
<input type="text" value="Readonly - can be selected and copied" readonly>
<p><strong>Disabled Input:</strong></p>
<input type="text" value="Disabled - cannot interact at all" disabled>
</div>
</body>
</html>
The output shows the visual difference between readonly and disabled inputs
Readonly Input: [Readonly - can be selected and copied] (light gray background) Disabled Input: [Disabled - cannot interact at all] (darker gray, cannot select text)
Method 3: Using CSS pointer-events Property
The pointer-events property controls how HTML elements respond to mouse/touch events, including CSS hover/active states, JavaScript click/tap events, and whether or not the cursor is visible. It specifies the conditions under which a specific graphic element may become the target of pointer events.
The three main values for the pointer-events property in HTML elements are
-
none: Deactivates all pointer events and allows click-through to underlying elements.
-
auto: The default value. The element responds to pointer events normally.
-
inherit: Uses the pointer-events value of the element's parent.
Syntax
input {
pointer-events: none;
}
Example Disabling Pointer Events
In the example below, we will set the pointer-events value to none to prevent interaction with the text fields
<!DOCTYPE html>
<html>
<head>
<title>Pointer Events Disabled</title>
<style>
.container {
text-align: center;
padding: 20px;
background-color: #fce4ec;
border: 2px solid #e91e63;
border-radius: 8px;
margin: 20px 0;
}
.no-pointer {
pointer-events: none;
padding: 10px;
font-size: 16px;
border: 2px solid #ccc;
border-radius: 4px;
margin: 10px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<div class="container">
<p>Non-Editable Text Fields (Pointer Events Disabled):</p>
<input class="no-pointer" type="text" value="Pointer events disabled - cannot click or focus">
<input class="no-pointer" type="text" value="This field is also non-interactive">
</div>
</body>
</html>
Example Selective Pointer Event Control
In this example, we include two input text fields and make only one of them non-editable by disabling pointer events
<!DOCTYPE html>
<html>
<head>
<title>Selective Pointer Events</title>
<style>
.container {
text-align: center;
padding: 20px;
background-color: #f5f5dc;
border: 2px solid #deb887;
border-radius: 8px;
margin: 20px 0;
}
.normal-input {
padding: 10px;
margin: 10px;
font-size: 16px;
border: 2px solid #4caf50;
border-radius: 4px;
}
.disabled-pointer {
pointer-events: none;
padding: 10px;
margin: 10px;
font-size: 16px;
border: 2px solid #f44336;
border-radius: 4px;
background-color: #f9f9f9;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<div class="container">
<p>Editable Text Field:</p>
<input class="normal-input" type="text" value="This field can be edited normally">
<p>Non-Editable Text Field:</p>
<input class="disabled-pointer" type="text" value="Pointer events disabled - cannot interact">
</div>
</body>
</html>
The first input field works normally, while the second cannot be clicked or focused due to disabled pointer events.
5K+ Views
