To create a text box where the user can’t type inside the text box, we have different approaches. In this article, we are going to learn how to create a text box where the user can’t type inside the text box in JavaScript.
Below are the approaches to creating a text box where the user can’t type inside the text box:
Table of Content
Approach 1: Using Readonly Attribute
It is a Boolean attribute that is used to specify that the text written in input or text area Element is read-only. It means that a user can not modify or change content already present in a particular Element (However, a user can tab to it, highlight it, and copy the text from it). Whereas JavaScript can be used to change the read-only value and make the input field editable.
Elements: This attribute is used with two elements which are listed below:
- <input>: It is used to read-only attributes to read the content only.
- <text-area> It is used to hold the readonly attribute.
Syntax:
<input readonly>Example: In this example, we are using Readonly Attribute.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Readonly Text Box Example</title>
<style>
input {
margin: 10px;
width: 300px;
height: 40px;
}
</style>
</head>
<body>
<label for="normalTextBox">Normal Text Box:</label>
<input type="text"
id="normalTextBox"
value="You can type in this text box">
<br>
<label for="readOnlyTextBox">Readonly Text Box:</label>
<input type="text"
id="readOnlyTextBox"
readonly
value="This is a readonly text box.">
</body>
</html>
|
Output:
Approach 2: Using Disabled Attribute
The disabled attribute in HTML indicates whether the element is disabled or not. If this attribute is set, the element is disabled. The disabled attribute is usually drawn with grayed-out text. If the element is disabled, it does not respond to user actions, it cannot be focused. It is a boolean attribute.
Usage: It can be used on the following elements: <button>, <input>, <option>, <select>, <textarea>, <fieldset>, <optgroup> and <keygen>.
Syntax:
<tag disabled></tag>Example: In this example, we are using Disabled Attribute.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Disabled Text Box Example</title>
<style>
input {
margin: 10px;
width: 300px;
height: 40px;
}
</style>
</head>
<body>
<!-- Normal Text Box -->
<label for="normalTextBox">Normal Text Box:</label>
<input type="text" id="normalTextBox"
value="You can type in this text box"
style="width: 300px;">
<br>
<!-- Disabled Text Box -->
<label for="disabledTextBox">Disabled Text Box:</label>
<input type="text" id="disabledTextBox" disabled
value="This is a disabled text box" style="width: 300px;">
</body>
</html>
|
Output: