HTMLTextAreaElement

Instanzeigenschaften

Erbt außerdem Eigenschaften von der übergeordneten Schnittstelle HTMLElement.

autocomplete

Eine Zeichenfolge, die das autocomplete-Attribut des Elements darstellt.

cols

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

defaultValue

Eine Zeichenfolge, die den Standardwert des Steuerelements darstellt und sich wie die Eigenschaft Node.textContent verhält.

dirName

Eine Zeichenfolge, die die Schreibrichtung des Elements darstellt.

disabled

Ein boolescher Wert, der das disabled-Attribut des Elements darstellt und angibt, dass keine Interaktion mit dem Steuerelement möglich ist.

form Schreibgeschützt

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

labels Schreibgeschützt

Gibt eine NodeList der <label>-Elemente zurück, die diesem Element zugeordnet sind.

maxLength

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

minLength

Eine Zahl, die das minlength-Attribut des Elements darstellt und die Mindestanzahl an Zeichen angibt, die Benutzer eingeben können. Diese Einschränkung wird nur geprüft, wenn sich der Wert ändert.

name

Eine Zeichenfolge, die das name-Attribut des Elements darstellt und den Namen des Steuerelements enthält.

placeholder

Eine Zeichenfolge, die das placeholder-Attribut des Elements darstellt und einen Hinweis darauf enthält, was Benutzer in das Steuerelement eingeben sollen.

readOnly

Ein boolescher Wert, der das readonly-Attribut des Elements darstellt und angibt, dass Benutzer den Wert des Steuerelements nicht ändern können.

required

Ein boolescher Wert, der das required-Attribut des Elements darstellt und angibt, dass Benutzer vor dem Absenden des Formulars einen Wert angeben müssen.

rows

Eine Zahl, die das rows-Attribut des Elements darstellt und die Anzahl der sichtbaren Textzeilen des Steuerelements angibt.

selectionDirection

Eine Zeichenfolge, die die Richtung angibt, in der die Auswahl erfolgte. Sie hat den Wert forward, wenn die Auswahl in der Richtung vom Anfang zum Ende der aktuellen Spracheinstellung vorgenommen wurde, und backward für die entgegengesetzte Richtung. Ist die Richtung unbekannt, kann sie auch none sein.

selectionEnd

Eine Zahl, die den Index des Endes des ausgewählten Textes darstellt. Wenn kein Text ausgewählt ist, enthält sie den Index des Zeichens nach dem Eingabecursor. Beim Festlegen dieses Werts verhält sich das Steuerelement so, als wäre setSelectionRange() mit diesem Wert als zweitem Argument und selectionStart als erstem Argument aufgerufen worden.

selectionStart

Eine Zahl, die den Index des Anfangs des ausgewählten Textes darstellt. Wenn kein Text ausgewählt ist, enthält sie den Index des Zeichens nach dem Eingabecursor. Beim Festlegen dieses Werts verhält sich das Steuerelement so, als wäre setSelectionRange() mit diesem Wert als erstem Argument und selectionEnd als zweitem Argument aufgerufen worden.

textLength Schreibgeschützt

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

type Schreibgeschützt

Gibt die Zeichenfolge textarea zurück.

validationMessage Schreibgeschützt

Gibt eine lokalisierte Meldung zurück, die beschreibt, welche Validierungseinschränkungen das Steuerelement gegebenenfalls nicht erfüllt. Wenn das Steuerelement nicht für die Validierung anhand von Einschränkungen infrage kommt (willValidate ist false) oder alle Einschränkungen erfüllt, ist dies eine leere Zeichenfolge.

validity Schreibgeschützt

Gibt den Validitätszustand des Elements zurück.

value

Eine Zeichenfolge, die den unverarbeiteten Wert des Steuerelements darstellt.

willValidate Schreibgeschützt

Gibt an, ob das Element für die Validierung anhand von Einschränkungen infrage kommt. Der Wert ist false, wenn eine Bedingung die Validierung ausschließt, etwa wenn die Eigenschaft readOnly oder disabled den Wert true hat.

wrap

Eine Zeichenfolge, die das wrap-Attribut des Elements darstellt und angibt, wie der Text im Steuerelement umgebrochen wird.

Instanzmethoden

Erbt außerdem Methoden von der übergeordneten Schnittstelle HTMLElement.

checkValidity()

Gibt false zurück, wenn das Element für die Validierung anhand von Einschränkungen infrage kommt und diese nicht erfüllt. In diesem Fall löst die Methode außerdem ein abbrechbares invalid-Ereignis am Steuerelement aus. Sie gibt true zurück, wenn das Steuerelement nicht für die Validierung infrage kommt oder seine Einschränkungen erfüllt.

reportValidity()

Diese Methode meldet Benutzern gegebenenfalls Probleme mit den Einschränkungen des Elements. Wenn Probleme vorliegen, löst sie ein abbrechbares invalid-Ereignis am Element aus und gibt false zurück. Andernfalls gibt sie true zurück.

select()

Wählt den Inhalt des Steuerelements aus.

setCustomValidity()

Legt eine benutzerdefinierte Validierungsmeldung für das Element fest. Wenn diese Meldung keine leere Zeichenfolge ist, liegt für das Element ein benutzerdefinierter Validierungsfehler vor und es besteht die Validierung nicht.

setRangeText()

Ersetzt einen Textbereich im Element durch neuen Text.

setSelectionRange()

Wählt einen Textbereich im Element aus, ohne das Element zu fokussieren.

Ereignisse

Erbt außerdem Ereignisse von der übergeordneten Schnittstelle HTMLElement.

Sie können diese Ereignisse mit addEventListener() überwachen oder der Eigenschaft oneventname dieser Schnittstelle einen Event-Listener zuweisen:

select-Ereignis

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

selectionchange-Ereignis

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

Beispiele

Beispiel für ein automatisch wachsendes Textfeld

Lassen Sie ein Textfeld beim Tippen automatisch wachsen:

HTML

<fieldset>
  <legend>Your comments</legend>
  <p><textarea class="no-scrollbars"></textarea></p>
</fieldset>

CSS

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

JavaScript

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

document.querySelector("textarea").addEventListener("keyup", (e) => {
  autoGrow(e.target);
});

Beispiel zum Einfügen von HTML-Tags

Fügen Sie einige HTML-Tags in ein Textfeld ein:

const textArea = document.querySelector("#my-text-area");

function insert(startTag, endTag) {
  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 {
    textArea.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>"));

Gestalten Sie das span-Element so, dass es sich wie ein Link verhält:

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

<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 id="my-text-area" 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>

Spezifikationen

Browser-Kompatibilität