TheHTMLTextAreaElement interface provides 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'sautocomplete attribute.

cols

A number that represents the element'scols attribute, indicating the visible width of the text area.

defaultValue

A string that represents the control's default value, which behaves like theNode.textContent property.

dirName

A string that represents the directionality of the element.

disabled

A boolean that represents the element'sdisabled attribute, indicating that the control is not available for interaction.

formRead only

Returns a reference to the parent form element. If this element is not contained in a form element, it can be theid attribute of any<form> element in the same document or the valuenull.

labelsRead only

Returns aNodeList of the<label> elements associated with this element.

maxLength

A number that represents the element'smaxlength 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'sminlength 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'sname attribute, containing the name of the control.

placeholder

A string that represents the element'splaceholder attribute, containing a hint to the user about what to enter in the control.

readOnly

A boolean that represents the element'sreadonly attribute, indicating that the user cannot modify the value of the control.

required

A boolean that represents the element'srequired attribute, indicating that the user must specify a value before submitting the form.

rows

A number that represents the element'srows attribute, indicating the number of visible text lines for the control.

selectionDirection

A string that represents the direction in which selection occurred. This isforward 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 ifsetSelectionRange() 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 ifsetSelectionRange() had been called with this as the first argument andselectionEnd as the second argument.

textLengthRead only

Returns the code point length of the control'svalue. Same as readingvalue.length.

typeRead only

Returns the stringtextarea.

validationMessageRead 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.

validityRead only

Returns the validity state that this element is in.

value

A string that represents the raw value contained in the control.

willValidateRead 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'swrap attribute, indicating how the control wraps text.

Instance methods

Also inherits methods from its parent interface,HTMLElement.

checkValidity()

Returnsfalse 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 cancelableinvalid 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 usingaddEventListener() or by assigning an event listener to theoneventname property of this interface:

select event

Fires when some text has been selected.

selectionchange event

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`;  }}document.querySelector("textarea").addEventListener("keyup", (e) => {  autoGrow(e.target);});

CSS

textarea.no-scrollbars {  overflow: hidden;  width: 300px;  height: 100px;}

HTML

<form>  <fieldset>    <legend>Your comments</legend>    <p><textarea></textarea></p>    <p><input type="submit" value="Send" /></p>  </fieldset></form>

Insert HTML tags example

Insert some HTML tags in a textarea:

function insert(startTag, endTag) {  const textArea = document.myForm.myTextArea;  const start = textArea.selectionStart;  const end = textArea.selectionEnd;  const oldText = textArea.value;  const prefix = oldText.substring(0, start);  const inserted = startTag + oldText.substring(start, end) + endTag;  const suffix = oldText.substring(end);  textArea.value = `${prefix}${inserted}${suffix}`;  const newStart = start + startTag.length;  const newEnd = end + startTag.length;  textArea.setSelectionRange(newStart, newEnd);  textArea.focus();}function insertURL() {  const newURL = prompt("Enter the full URL for the link");  if (newURL) {    insert(`<a href="${newURL}">`, "</a>");  } else {    document.myForm.myTextArea.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("<code>", "</code>"));

Decorate the span to behave like a link:

.intLink {  cursor: pointer;  text-decoration: underline;  color: blue;}

<form name="myForm">  <p>    [    <span><strong>Bold</strong></span> |    <span><em>Italic</em></span> |    <span>URL</span> |    <span>code</span> ]  </p>  <p>    <textarea name="myTextArea" 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.     </textarea>  </p></form>

Specifications

Browser compatibility