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 disable the input type text area?
In this article, we will learn how to disable the input type text area element with the help of a disabled attribute.
Disabling an input field can be useful in situations where one wants to display information to the user but does not want the user to be able to edit or modify that information. For example, to display a message or a set of instructions in a text area element. This can also be useful in cases where one wants the user to avoid typing the content in the text area in the middle of a form submission. This helps reduce any consistencies in the data sent to the server from form submission.
Here, we will disable the input type text area element with the help of a disabled attribute in HTML which takes in a boolean value.
Let’s understand this with the help of some examples −
Example 1
In this example, we will create a form with different inputs including Email, first name, and last name, and a text area input for address, and we will disable the text area input by default.
Filename: index.html
<html lang="en">
<head>
<title>How to disable input type text area?</title>
</head>
<body>
<h3>How to disable input type text area?</h3>
<form id="myForm" style="display: flex; flex-direction: column; gap: 10px; max-width: 300px;">
<input type="email" name="email" placeholder="Enter your email">
<input type="text" name="firstName" placeholder="Enter your first name">
<input type="text" name="lastName" placeholder="Enter your last name">
<textarea name="address" placeholder="Enter your address" disabled="true"></textarea>
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
Example 2
In this example, we will dynamically disable the text area element when a form is getting submitted. We will enable the element once the form submission is done.
Filename: index.html
<html lang="en">
<head>
<title>How to disable input type text area?</title>
</head>
<body>
<h3>How to disable input type text area?</h3>
<form id="myForm" style="display: flex; flex-direction: column; gap: 10px; max-width: 300px;">
<input type="email" name="email" placeholder="Enter your email">
<input type="text" name="firstName" placeholder="Enter your first name">
<input type="text" name="lastName" placeholder="Enter your last name">
<textarea name="address" placeholder="Enter your address"></textarea>
<input type="submit" name="submit" value="Submit">
</form>
<script>
const myForm = document.getElementById('myForm');
const inputs = myForm.querySelectorAll('input');
const textArea = myForm.querySelector('textarea');
myForm.addEventListener('submit', async (e) => {
e.preventDefault();
textArea.disabled = true;
await new Promise((res, rej) => {
setTimeout(() => {
textArea.disabled = false;
res();
}, 2000);
});
});
</script>
</body>
</html>
Example 3
In this example, we will disable the text area input element using the pointer-events property of CSS, and set this to none, hence making it non-interactive.
Filename: index.html
<html lang="en">
<head>
<title>How to disable input type text area?</title>
<style>
.disabled {
pointer-events: none;
background-color: lightgray;
}
</style>
</head>
<body>
<h3>How to disable input type text area?</h3>
<form id="myForm" style="display: flex; flex-direction: column; gap: 10px; max-width: 300px;">
<input type="email" name="email" placeholder="Enter your email">
<input type="text" name="firstName" placeholder="Enter your first name">
<input type="text" name="lastName" placeholder="Enter your last name">
<textarea name="address" placeholder="Enter your address" disabled="true"></textarea>
<input type="submit" name="submit" value="Submit">
</form>
<script>
// Additional example: Using pointer-events property of CSS
const addressTextArea = document.querySelector('textarea[name="address"]');
addressTextArea.addEventListener('click', function(event) {
event.preventDefault();
});
addressTextArea.classList.add('disabled');
</script>
</body>
</html>
Conclusion
In this article, we learned how to disable the input type text area element with the help disabled attribute. In the first example, we statically disabled the text area element by providing a disabled attribute to true. In the second example, we dynamically disabled the text area element when a form is getting submitted. In the third example, we disabled the element using the pointer-events CSS property.
330 Views
