How to useDisabled Attribute in Javascript
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.
HTML
<!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:
How Create a Text Box Where User Can’t Type Inside the Text Box ?
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
- Using Readonly Attribute
- Using Disabled Attribute