HTMLTextAreaElement

Instanz-Eigenschaften

Erbt auch Eigenschaften von seinem Eltern-Interface, HTMLElement.

autocomplete

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

cols

Eine Zahl, die das cols-Attribut des Elements reprsentiert und die sichtbare Breite des Textfeldes angibt.

defaultValue

Ein String, der den Standardwert des Steuerelements reprsentiert und sich wie die Node.textContent-Eigenschaft verhlt.

dirName

Ein String, der die Richtung des Elements darstellt.

disabled

Ein boolescher Wert, der das disabled-Attribut des Elements reprsentiert und anzeigt, dass das Steuerelement nicht fr Interaktionen verfgbar ist.

form Schreibgeschtzt

Gibt einen Verweis auf das bergeordnete Formularelement zurck. Wenn dieses Element nicht in einem Formularelement enthalten ist, kann es das id-Attribut eines beliebigen <form>-Elements im selben Dokument oder der Wert null sein.

labels Schreibgeschtzt

Gibt eine NodeList der mit diesem Element verbundenen <label>-Elemente zurck.

maxLength

Eine Zahl, die das maxlength-Attribut des Elements reprsentiert und die maximale Anzahl von Zeichen angibt, die der Benutzer eingeben kann. Diese Einschrnkung wird nur ausgewertet, wenn sich der Wert ndert.

minLength

Eine Zahl, die das minlength-Attribut des Elements reprsentiert und die minimale Anzahl von Zeichen angibt, die der Benutzer eingeben kann. Diese Einschrnkung wird nur ausgewertet, wenn sich der Wert ndert.

name

Ein String, der das name-Attribut des Elements reprsentiert und den Namen des Steuerelements enthlt.

placeholder

Ein String, der das placeholder-Attribut des Elements reprsentiert und einen Hinweis fr den Benutzer enthlt, was in das Steuerelement eingegeben werden soll.

readOnly

Ein boolescher Wert, der das readonly-Attribut des Elements reprsentiert und anzeigt, dass der Benutzer den Wert des Steuerelements nicht ndern kann.

required

Ein boolescher Wert, der das required-Attribut des Elements reprsentiert und anzeigt, dass der Benutzer einen Wert angeben muss, bevor er das Formular absendet.

rows

Eine Zahl, die das rows-Attribut des Elements reprsentiert und die Anzahl der sichtbaren Textzeilen fr das Steuerelement angibt.

selectionDirection

Ein String, der die Richtung angibt, in der die Auswahl erfolgte. Dies ist forward, wenn die Auswahl in der Start-zu-Ende-Richtung der aktuellen Lokalisierung durchgefhrt wurde, oder backward fr die entgegengesetzte Richtung. Es kann auch none sein, wenn die Richtung unbekannt ist.

selectionEnd

Eine Zahl, die den Index des Endes des ausgewhlten Textes reprsentiert. Wenn kein Text ausgewhlt ist, enthlt er den Index des Zeichens, das dem Eingabecursor folgt. Wenn er gesetzt wird, verhlt sich das Steuerelement so, als ob setSelectionRange() mit diesem als zweites Argument und selectionStart als erstes Argument aufgerufen worden wre.

selectionStart

Eine Zahl, die den Index des Beginns des ausgewhlten Textes reprsentiert. Wenn kein Text ausgewhlt ist, enthlt er den Index des Zeichens, das dem Eingabecursor folgt. Wenn er gesetzt wird, verhlt sich das Steuerelement so, als ob setSelectionRange() mit diesem als erstes Argument und selectionEnd als zweites Argument aufgerufen worden wre.

textLength Schreibgeschtzt

Gibt die Zeichenpunktlnge des value-Wertes des Steuerelements zurck. Entspricht dem Auslesen von value.length.

type Schreibgeschtzt

Gibt den String textarea zurck.

validationMessage Schreibgeschtzt

Gibt eine lokalisierte Nachricht zurck, die die Validierungseinschrnkungen beschreibt, die das Steuerelement nicht erfllt (falls vorhanden). Dies ist der leere String, wenn das Steuerelement nicht fr die Einschrnkungsvalidierung in Frage kommt (willValidate ist false) oder es seine Einschrnkungen erfllt.

validity Schreibgeschtzt

Gibt den Gltigkeitsstatus zurck, in dem sich dieses Element befindet.

value

Ein String, der den rohen Wert enthlt, der im Steuerelement enthalten ist.

willValidate Schreibgeschtzt

Gibt zurck, ob das Element ein Kandidat fr die Einschrnkungsvalidierung ist. false wenn irgendwelche Bedingungen es von der Einschrnkungsvalidierung ausschlieen, einschlielich wenn seine readOnly- oder disabled-Eigenschaft true ist.

wrap

Ein String, der das wrap-Attribut des Elements reprsentiert und angibt, wie das Steuerelement Text umbricht.

Instanz-Methoden

Erbt auch Methoden von seinem Eltern-Interface, HTMLElement.

checkValidity()

Gibt false zurck, wenn das Element ein Kandidat fr die Einschrnkungsvalidierung ist und es seine Einschrnkungen nicht erfllt. In diesem Fall lst es auch ein abbrechbares invalid-Ereignis am Steuerelement aus. Es gibt true zurck, wenn das Steuerelement kein Kandidat fr die Einschrnkungsvalidierung ist oder wenn es seine Einschrnkungen erfllt.

reportValidity()

Diese Methode meldet dem Benutzer die Probleme mit den Einschrnkungen des Elements, falls vorhanden. Wenn es Probleme gibt, lst es ein abbrechbares invalid-Ereignis am Element aus und gibt false zurck; wenn es keine Probleme gibt, gibt es true zurck.

select()

Whlt den Inhalt des Steuerelements aus.

setCustomValidity()

Setzt eine benutzerdefinierte Fehlermeldung fr das Element. Wenn diese Nachricht nicht der leere String ist, leidet das Element unter einem benutzerdefinierten Gltigkeitsfehler und wird nicht validiert.

setRangeText()

Ersetzt einen Textbereich im Element durch neuen Text.

setSelectionRange()

Whlt einen Textbereich im Element aus (fokussiert es jedoch nicht).

Ereignisse

Erbt auch Ereignisse von seinem Eltern-Interface, HTMLElement.

Hren Sie auf diese Ereignisse mit addEventListener() oder indem Sie einen Ereignis-Listener zur oneventname-Eigenschaft dieses Interfaces zuweisen:

select-Ereignis

Wird ausgelst, wenn ein Text ausgewhlt wurde.

selectionchange-Ereignis

Wird ausgelst, wenn die Textauswahl in einem <textarea>-Element gendert wurde.

Beispiele

Beispiel fr automatisch wachsendes Textfeld

Ein Textfeld beim Tippen automatisch vergrern lassen:

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 class="no-scrollbars"></textarea></p>
    <p><input type="submit" value="Send" /></p>
  </fieldset>
</form>

Beispiel fr das Einfgen von HTML-Tags

Einige HTML-Tags in ein Textfeld einfgen:

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

Dekorieren Sie das span, damit es sich wie ein Link verhlt:

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

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

Spezifikationen

Browser-Kompatibilitt