docs.rodeo

MDN Web Docs mirror

HTMLTextAreaElement

{{APIRef("HTML DOM")}} 

The HTMLTextAreaElement interface provides properties and methods for manipulating the layout and presentation of {{HTMLElement("textarea")}}  elements.

{{InheritanceDiagram}} 

Instance properties

Also inherits properties from its parent interface, {{DOMxRef("HTMLElement")}} .

Instance methods

Also inherits methods from its parent interface, {{DOMxRef("HTMLElement")}} .

Events

Also inherits events from its parent interface, {{DOMxRef("HTMLElement")}} .

Listen to these events using {{domxref("EventTarget/addEventListener", "addEventListener()")}}  or by assigning an event listener to the oneventname property of this interface:

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>

{{EmbedLiveSample('Autogrowing_textarea_example', 600, 300)}} 

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: #0000ff;
}

<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="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>

{{EmbedLiveSample('insert-html', , '300', , , , , 'allow-modals')}} 

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

In this article

View on MDN