HTMLTextAreaElement
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The HTMLTextAreaElement
interface provides special properties and methods for manipulating the layout and presentation of <textarea>
elements.
Instance properties
Also inherits properties from its parent interface, HTMLElement
.
autocomplete
-
A string that represents the element's
autocomplete
attribute. cols
-
A number that represents the element's
cols
attribute, indicating the visible width of the text area. defaultValue
-
A string that represents the control's default value, which behaves like the
Node.textContent
property. dirName
-
A string that represents the directionality of the element.
disabled
-
A boolean that represents the element's
disabled
attribute, indicating that the control is not available for interaction. form
Read only-
Returns a reference to the parent form element. If this element is not contained in a form element, it can be the
id
attribute of any<form>
element in the same document or the valuenull
. labels
Read only-
Returns a
NodeList
of the<label>
elements associated with this element. maxLength
-
A number that represents the element's
maxlength
attribute, indicating the maximum number of characters the user can enter. This constraint is evaluated only when the value changes. minLength
-
A number that represents the element's
minlength
attribute, indicating the minimum number of characters the user can enter. This constraint is evaluated only when the value changes. name
-
A string that represents the element's
name
attribute, containing the name of the control. placeholder
-
A string that represents the element's
placeholder
attribute, containing a hint to the user about what to enter in the control. readOnly
-
A boolean that represents the element's
readonly
attribute, indicating that the user cannot modify the value of the control. required
-
A boolean that represents the element's
required
attribute, indicating that the user must specify a value before submitting the form. rows
-
A number that represents the element's
rows
attribute, indicating the number of visible text lines for the control. selectionDirection
-
A string that represents the direction in which selection occurred. This is
forward
if selection was performed in the start-to-end direction of the current locale, orbackward
for the opposite direction. This can also benone
if the direction is unknown. selectionEnd
-
A number that represents the index of the end of selected text. If no text is selected, it contains the index of the character that follows the input cursor. On being set, the control behaves as if
setSelectionRange()
had been called with this as the second argument, andselectionStart
as the first argument. selectionStart
-
A number that represents the index of the beginning of selected text. If no text is selected, it contains the index of the character that follows the input cursor. On being set, the control behaves as if
setSelectionRange()
had been called with this as the first argument andselectionEnd
as the second argument. textLength
Read only-
Returns the code point length of the control's
value
. Same as readingvalue.length
. type
Read only-
Returns the string
textarea
. validationMessage
Read only-
Returns a localized message that describes the validation constraints that the control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation (
willValidate
isfalse
), or it satisfies its constraints. validity
Read only-
Returns the validity state that this element is in.
value
-
A string that represents the raw value contained in the control.
willValidate
Read only-
Returns whether the element is a candidate for constraint validation.
false
if any conditions bar it from constraint validation, including itsreadOnly
ordisabled
property istrue
. wrap
-
A string that represents the element's
wrap
attribute, indicating how the control wraps text.
Instance methods
Also inherits methods from its parent interface, HTMLElement
.
checkValidity()
-
Returns
false
if the element is a candidate for constraint validation, and it does not satisfy its constraints. In this case, it also fires a cancelableinvalid
event at the control. It returnstrue
if the control is not a candidate for constraint validation, or if it satisfies its constraints. reportValidity()
-
This method reports the problems with the constraints on the element, if any, to the user. If there are problems, it fires a cancelable
invalid
event at the element, and returnsfalse
; if there are no problems, it returnstrue
. select()
-
Selects the contents of the control.
setCustomValidity()
-
Sets a custom validity message for the element. If this message is not the empty string, then the element is suffering from a custom validity error, and does not validate.
setRangeText()
-
Replaces a range of text in the element with new text.
setSelectionRange()
-
Selects a range of text in the element (but does not focus it).
Events
Also inherits events from its parent interface, HTMLElement
.
Listen to these events using addEventListener()
or by assigning an event listener to the oneventname
property of this interface:
select
event-
Fires when some text has been selected.
selectionchange
event Experimental-
Fires when the text selection in a
<textarea>
element has been changed.
Examples
Autogrowing textarea example
Make a textarea autogrow while typing:
JavaScript
function autoGrow(field) {
if (field.scrollHeight > field.clientHeight) {
field.style.height = `${field.scrollHeight}px`;
}
}
CSS
textarea.no-scrollbars {
overflow: hidden;
width: 300px;
height: 100px;
}
HTML
<form>
<fieldset>
<legend>Your comments</legend>
<p><textarea class="no-scrollbars" onkeyup="autoGrow(this);"></textarea></p>
<p><input type="submit" value="Send" /></p>
</fieldset>
</form>
Insert HTML tags example
Insert some HTML tags in a textarea.
JavaScript
function insert(startTag, endTag) {
const textArea = document.myForm.myTxtArea;
const selectionStart = textArea.selectionStart;
const selectionEnd = textArea.selectionEnd;
const oldText = textArea.value;
const prefix = oldText.substring(0, selectionStart);
const inserted =
startTag + oldText.substring(selectionStart, selectionEnd) + endTag;
const suffix = oldText.substring(selectionEnd);
textArea.value = `${prefix}${inserted}${suffix}`;
const newSelectionStart = selectionStart + startTag.length;
const newSelectionEnd = selectionEnd + startTag.length;
textArea.setSelectionRange(newSelectionStart, newSelectionEnd);
textArea.focus();
}
function insertURL() {
const newURL = prompt("Enter the full URL for the link");
if (newURL) {
insert(`<a href="${newURL}">`, "</a>");
} else {
document.myForm.myTxtArea.focus();
}
}
const strong = document.querySelector("#format-strong");
const em = document.querySelector("#format-em");
const link = document.querySelector("#format-link");
const code = document.querySelector("#format-code");
strong.addEventListener("click", (e) => insert("<strong>", "</strong>"));
em.addEventListener("click", (e) => insert("<em>", "</em>"));
link.addEventListener("click", (e) => insertURL());
code.addEventListener("click", (e) => insert("\n<code>\n", "\n</code>\n"));
CSS
CSS to decorate the internal span to behave like a link:
.intLink {
cursor: pointer;
text-decoration: underline;
color: #0000ff;
}
HTML:
<form name="myForm">
<p>
[
<span class="intLink" id="format-strong"><strong>Bold</strong></span> |
<span class="intLink" id="format-em"><em>Italic</em></span> |
<span class="intLink" id="format-link">URL</span> |
<span class="intLink" id="format-code">code</span> ]
</p>
<p>
<textarea name="myTxtArea" rows="10" cols="50">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis, arcu vitae adipiscing placerat, nisl lectus accumsan nisi, vitae iaculis sem neque vel lectus. Praesent tristique commodo lorem quis fringilla. Sed ac tellus eros. Sed consectetur eleifend felis vitae luctus. Praesent sagittis, est eget bibendum tincidunt, ligula diam tincidunt augue, a fermentum odio velit eget mi. Phasellus mattis, elit id fringilla semper, orci magna cursus ligula, non venenatis lacus augue sit amet dui. Pellentesque lacinia odio id nisi pulvinar commodo tempus at odio. Ut consectetur eros porttitor nunc mollis ultrices. Aenean porttitor, purus sollicitudin viverra auctor, neque erat blandit sapien, sit amet tincidunt massa mi ac nibh. Proin nibh sem, bibendum ut placerat nec, cursus et lacus. Phasellus vel augue turpis. Nunc eu mauris eu leo blandit mollis interdum eget lorem.
</textarea>
</p>
</form>
Specifications
Specification |
---|
HTML Standard # htmltextareaelement |
Browser compatibility
BCD tables only load in the browser