HTMLTextAreaElement

Erbt auch Eigenschaften von seinem übergeordneten Interface, HTMLElement.

autocomplete

Ein String, der das autocomplete-Attribut des Elements darstellt.

cols

Eine Zahl, die das cols-Attribut des Elements darstellt, das die sichtbare Breite des Textbereichs angibt.

defaultValue

Ein String, der den Standardwert der Kontrolle darstellt, der sich wie die Node.textContent-Eigenschaft verhält.

dirName

Ein String, der die Ausrichtung des Elements repräsentiert.

disabled

Ein Boolean, der das disabled-Attribut des Elements darstellt und anzeigt, dass die Steuerung nicht für die Interaktion verfügbar ist.

form Nur lesbar

Gibt eine Referenz auf das übergeordnete Formularelement zurück. Wenn dieses Element nicht in einem Formularelement enthalten ist, kann es das id-Attribut eines beliebigen <form>-Elements im gleichen Dokument oder der Wert null sein.

labels Nur lesbar

Gibt eine NodeList der mit diesem Element assoziierten <label>-Elemente zurück.

maxLength

Eine Zahl, die das maxlength-Attribut des Elements darstellt und die maximale Anzahl von Zeichen angibt, die der Benutzer eingeben kann. Diese Einschränkung wird nur überprüft, wenn sich der Wert ändert.

minLength

Eine Zahl, die das minlength-Attribut des Elements darstellt und die minimale Anzahl von Zeichen angibt, die der Benutzer eingeben muss. Diese Einschränkung wird nur überprüft, wenn sich der Wert ändert.

name

Ein String, der das name-Attribut des Elements darstellt und den Namen der Steuerung enthält.

placeholder

Ein String, der das placeholder-Attribut des Elements darstellt und einen Hinweis an den Benutzer enthält, was in die Steuerung eingegeben werden soll.

readOnly

Ein Boolean, der das readonly-Attribut des Elements darstellt und anzeigt, dass der Benutzer den Wert der Steuerung nicht ändern kann.

required

Ein Boolean, der das required-Attribut des Elements darstellt und anzeigt, dass der Benutzer einen Wert angeben muss, bevor er das Formular abschickt.

rows

Eine Zahl, die das rows-Attribut des Elements darstellt und die Anzahl der sichtbaren Textzeilen für die Steuerung angibt.

selectionDirection

Ein String, der die Richtung darstellt, in der die Auswahl erfolgt ist. Dies ist forward, wenn die Auswahl in der start-zu-end-Richtung der aktuellen Sprache erfolgt, oder backward für die entgegengesetzte Richtung. Dies kann auch none sein, wenn die Richtung unbekannt ist.

selectionEnd

Eine Zahl, die den Index des Endes des ausgewählten Textes darstellt. Wenn kein Text ausgewählt ist, enthält es den Index des Zeichens, das dem Eingabecursor folgt. Wenn es gesetzt wird, verhält sich die Kontrolle so, als ob setSelectionRange() mit diesem als zweites Argument und selectionStart als erstes Argument aufgerufen worden wäre.

selectionStart

Eine Zahl, die den Index des Beginns des ausgewählten Textes darstellt. Wenn kein Text ausgewählt ist, enthält es den Index des Zeichens, das dem Eingabecursor folgt. Wenn es gesetzt wird, verhält sich die Kontrolle so, als ob setSelectionRange() mit diesem als erstes Argument und selectionEnd als zweites Argument aufgerufen worden wäre.

textLength Nur lesbar

Gibt die Länge des Werts in Codepunkten zurück. Entspricht dem Lesen von value.length.

type Nur lesbar

Gibt den String textarea zurück.

validationMessage Nur lesbar

Gibt eine lokalisierte Meldung zurück, die die Validierungseinschränkungen beschreibt, die die Steuerung (falls vorhanden) nicht erfüllt. Dies ist das leere String, wenn die Steuerung kein Kandidat für die Einschränkungsvalidierung ist (willValidate ist false) oder die Einschränkungen erfüllt.

validity Nur lesbar

Gibt den Status der Gültigkeit dieses Elements zurück.

value

Ein String, der den Rohwert enthält, der in der Steuerung enthalten ist.

willValidate Nur lesbar

Gibt zurück, ob das Element ein Kandidat für die Einschränkungsvalidierung ist. false, wenn irgendwelche Bedingungen es von der Einschränkungsvalidierung ausschließen, einschließlich wenn seine readOnly- oder disabled-Eigenschaft true ist.

wrap

Ein String, der das wrap-Attribut des Elements darstellt und angibt, wie die Steuerung den Text umbricht.

Erbt auch Methoden von seinem übergeordneten Interface, HTMLElement.

checkValidity()

Gibt false zurück, wenn das Element ein Kandidat für die Einschränkungsvalidierung ist und es seine Einschränkungen nicht erfüllt. In diesem Fall wird auch ein stornierbares invalid Ereignis an der Steuerung ausgelöst. Es gibt true zurück, wenn die Steuerung kein Kandidat für die Einschränkungsvalidierung ist oder seine Einschränkungen erfüllt.

reportValidity()

Diese Methode meldet dem Benutzer die Probleme mit den Einschränkungen des Elements, falls vorhanden. Wenn es Probleme gibt, wird ein stornierbares invalid-Ereignis an dem Element ausgelöst und es wird false zurückgegeben; wenn es keine Probleme gibt, wird true zurückgegeben.

select()

Wählt den Inhalt der Steuerung aus.

setCustomValidity()

Setzt eine benutzerdefinierte Fehlermeldung für das Element. Wenn diese Nachricht nicht der leere String ist, leidet das Element unter einem benutzerdefinierten Validitätsfehler und wird nicht validiert.

setRangeText()

Ersetzt einen Textbereich im Element durch einen neuen Text.

setSelectionRange()

Wählt einen Textbereich im Element aus (aber fokussiert ihn nicht).

Erbt auch Ereignisse von seinem übergeordneten Interface, HTMLElement.

Diese Ereignisse können mit addEventListener() überwacht werden oder indem ein Ereignis-Listener der oneventname-Eigenschaft dieses Interfaces zugewiesen wird:

select Ereignis

Wird ausgelöst, wenn ein Text ausgewählt wurde.

selectionchange Ereignis Experimentell

Wird ausgelöst, wenn die Textauswahl in einem <textarea>-Element geändert wurde.

Ein Textbereich, der beim Tippen automatisch wächst:

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>

Einfügen einiger HTML-Tags in einen Textbereich.

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, um den internen Span wie einen Link zu dekorieren:

.intLink {
  cursor: pointer;
  text-decoration: underline;
  color: #0000ff;
}

HTML:

<form name="myForm">
  <p>
    [&nbsp;
    <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> &nbsp;]
  </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>