Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 attribute type, an input field can be of various types.
The Input tag is a blank 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.
Example
The following code is a simple example of a text input.
<!DOCTYPE html> <html> <head> <title>Text input in HTML</title> </head> <body> <input type="text" 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 two methods to make the text of the input element non- editable.
Using the “readonly” Attribute
In HTML, the read-only 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 read-only attribute can be used to prevent a user from changing the value until certain conditions are met (like selecting a checkbox, etc.). The readonly value can then be removed and the input field made editable using JavaScript.
Example
In this example we use the read-only attribute inside the input element to make the text input non-editable.
<!DOCTYPE html>
<html>
<head>
<title>How to Make the Text Input Non-Editable</title>
<style>
div{
width:500px;
height:120px;
padding:10px;
margin:10px;
background-color:lightgreen;
}
p{
color:white;
font-size:20px;
font-weight:bold;
}
</style>
</head>
<body>
<div>
<p>The text field contains non-editable text. However, the text can be copied or highlighted. </p>
<input type="text" value="Non Editable Text" readonly>
</div>
</body>
</html>
Example
In this example, we will use the readonly attribute inside a JavaScript function to make the text-field non editable using the onclick event.
<!DOCTYPE html>
<html>
<head>
<title>How to Make the Text Input Non-Editable</title>
<style>
#sampleinput{
width:300px;
margin-top:20px;
}
#btn1,
#btn2{
width:110px;
height:30px;
border-radius:10px;
background-color:lightsalmon;
color:white;
font-weight:bold;
cursor:pointer;
}
#btn1:hover,
#btn2:hover{
background-color:red;
}
div{
width:350px;
height:120px;
background-color:oldlace;
padding:10px 15px 15px 20px;
}
</style>
</head>
<body>
<div>
<input type="text" id="sampleinput"/><br><br>
<input type="button" id="btn1" value="Enable Editing" onclick="enableEdit()"/>
<input type="button" id="btn2" value="Disable Editing" onclick="disableEdit()"/>
</div>
<script>
function enableEdit () {
var sampleinput = document.getElementById("sampleinput");
sampleinput.value = "The text can now be edited.";
sampleinput.disabled = false;
}
function disableEdit () {
var sampleinput= document.getElementById("sampleinput");
sampleinput.value = "This text is non-editable";
sampleinput.disabled = true;
}
</script>
</body>
</html>
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 (if any) under which a specific graphic element may become the target of pointer events.
While there are eleven possible values for the pointer-events property, the three valid values for any HTML element are none, auto, and inherit.
none: It is used for deactivating the click target and allows the elements to target whatever is underneath that element.
auto: It is the default value. It denotes that an element must respond to pointer
inherit: It uses the pointer-event value of the element’s parent.
Example
In the example below, we will set the pointer-event’s value to none to stop the pointer events and eventually make the text-fields non-editable.
<!DOCTYPE html>
<html>
<head>
<title>How to Make the Text Input Non-Editable</title>
<style>
body {
text-align: center;
background-color:whitesmoke;
}
.inputField {
pointer-events: none;
width:200px;
}
div{
width:450px;
height:60px;
margin:20px;
padding:20px;
background-color:lavenderblush;
border:2px solid plum;
}
</style>
</head>
<body>
<div>
Non-Editable Text Field:
<input class="inputField" name="input" value="Pointer event has been disabled">
<br><br>
Non-Editable Text Field:
<input class="inputField" name="input" value="Pointer event has been disabled">
</div>
</body>
</html>
Example
In this example we will include two input text fields and make only one of them non-editable by disabling the pointer event property in that particular input field using its class name or id.
<!DOCTYPE html>
<html>
<head>
<title>How to Make the Text Input Non-Editable</title>
<style>
body {
text-align: center;
background-color:whitesmoke;
}
.inputField2{
pointer-events: none;
}
input{
width:250px;
}
div{
width:450px;
height:60px;
margin:20px;
padding:20px;
background-color:beige;
border:2px solid saddlebrown;
}
</style>
</head>
<body>
<div>
Editable Text Field:
<input class="inputField1" name="input" value="Pointer event has not been disabled here.">
<br><br>
Non-Editable Text Field:
<input class="inputField2" name="input" value="Pointer event has been disabled here.">
</div>
</body>
</html>
2K+ Views
