HTMLTextAreaElement

Baseline *

20157

HTMLTextAreaElement <textarea>

EventTarget Node Element HTMLElement HTMLTextAreaElement

HTMLElement

autocomplete: autocomplete
cols: cols
defaultValue: Node.textContent
dirName
disabled: disabled
form: <form> id null
labels: <label> NodeList
maxLength: maxlength
minLength: minlength
name: name
placeholder: placeholder
readOnly: readonly
required: required
rows: rows
selectionDirection: forward backward none
selectionEnd: setSelectionRange() 2 selectionStart 1
selectionStart: setSelectionRange() 1 selectionEnd 2
textLength: value value.length
type: textarea
validationMessage: willValidate false
validity
value
willValidate: false readOnly disabled true
wrap: wrap

HTMLElement

checkValidity(): false invalid true
reportValidity(): invalid false true
select()
setCustomValidity()
setRangeText()
setSelectionRange()

HTMLElement

addEventListener() on

select
selectionchange: <textarea>

JavaScript

function autoGrow(field) {
  if (field.scrollHeight > field.clientHeight) {
    field.style.height = `${field.scrollHeight}px`;
  }
}

CSS

css

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

HTML

html

<form>
  <fieldset>
    <legend></legend>
    <p><textarea class="no-scrollbars" ></textarea></p>
    <p><input type="submit" value="" /></p>
  </fieldset>
</form>

HTML

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(" URL ");
  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>"));

span CSS

css

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


HTML # htmltextareaelement

MDN

MDN 202563

GitHub