HTMLTextAreaElement - Web-APIs | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

HTMLTextAreaElement

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Das HTMLTextAreaElement-Interface bietet Eigenschaften und Methoden zur Manipulation des Layouts und der Präsentation von <textarea>-Elementen.

EventTarget Node Element HTMLElement HTMLTextAreaElement

In diesem Artikel

Instanz-Eigenschaften

Erbt auch Eigenschaften von seinem Eltern-Interface, HTMLElement.

autocomplete

Ein String, der das autocomplete-Attribut des Elements repräsentiert.

cols

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

defaultValue

Ein String, der den Standardwert des Steuerelements repräsentiert und sich wie die Node.textContent-Eigenschaft verhält.

dirName

Ein String, der die Richtung des Elements darstellt.

disabled

Ein boolescher Wert, der das disabled-Attribut des Elements repräsentiert und anzeigt, dass das Steuerelement nicht für Interaktionen verfügbar ist.

form Schreibgeschützt

Gibt einen Verweis 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 selben Dokument oder der Wert null sein.

labels Schreibgeschützt

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

maxLength

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

minLength

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

name

Ein String, der das name-Attribut des Elements repräsentiert und den Namen des Steuerelements enthält.

placeholder

Ein String, der das placeholder-Attribut des Elements repräsentiert und einen Hinweis für den Benutzer enthält, was in das Steuerelement eingegeben werden soll.

readOnly

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

required

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

rows

Eine Zahl, die das rows-Attribut des Elements repräsentiert und die Anzahl der sichtbaren Textzeilen für 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 durchgeführt wurde, oder backward für die entgegengesetzte Richtung. Es kann auch none sein, wenn die Richtung unbekannt ist.

selectionEnd

Eine Zahl, die den Index des Endes des ausgewählten Textes repräsentiert. Wenn kein Text ausgewählt ist, enthält er den Index des Zeichens, das dem Eingabecursor folgt. Wenn er gesetzt wird, verhält sich das Steuerelement 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 repräsentiert. Wenn kein Text ausgewählt ist, enthält er den Index des Zeichens, das dem Eingabecursor folgt. Wenn er gesetzt wird, verhält sich das Steuerelement so, als ob setSelectionRange() mit diesem als erstes Argument und selectionEnd als zweites Argument aufgerufen worden wäre.

textLength Schreibgeschützt

Gibt die Zeichenpunktlänge des value-Wertes des Steuerelements zurück. Entspricht dem Auslesen von value.length.

type Schreibgeschützt

Gibt den String textarea zurück.

validationMessage Schreibgeschützt

Gibt eine lokalisierte Nachricht zurück, die die Validierungseinschränkungen beschreibt, die das Steuerelement nicht erfüllt (falls vorhanden). Dies ist der leere String, wenn das Steuerelement nicht für die Einschränkungsvalidierung in Frage kommt (willValidate ist false) oder es seine Einschränkungen erfüllt.

validity Schreibgeschützt

Gibt den Gültigkeitsstatus zurück, in dem sich dieses Element befindet.

value

Ein String, der den rohen Wert enthält, der im Steuerelement enthalten ist.

willValidate Schreibgeschützt

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 repräsentiert und angibt, wie das Steuerelement Text umbricht.

Instanz-Methoden

Erbt auch Methoden von seinem Eltern-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 löst es auch ein abbrechbares invalid-Ereignis am Steuerelement aus. Es gibt true zurück, wenn das Steuerelement kein Kandidat für die Einschränkungsvalidierung ist oder wenn es 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, löst es ein abbrechbares invalid-Ereignis am Element aus und gibt false zurück; wenn es keine Probleme gibt, gibt es true zurück.

select()

Wählt den Inhalt des Steuerelements aus.

setCustomValidity()

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

setRangeText()

Ersetzt einen Textbereich im Element durch neuen Text.

setSelectionRange()

Wählt einen Textbereich im Element aus (fokussiert es jedoch nicht).

Ereignisse

Erbt auch Ereignisse von seinem Eltern-Interface, HTMLElement.

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

select-Ereignis

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

selectionchange-Ereignis

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

Beispiele

Beispiel für automatisch wachsendes Textfeld

Ein Textfeld beim Tippen automatisch vergrößern lassen:

JavaScript

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

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

CSS

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

HTML

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

Beispiel für das Einfügen von HTML-Tags

Einige HTML-Tags in ein Textfeld einfügen:

js
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 verhält:

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

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>

Spezifikationen

Spezifikation

HTML
# htmltextareaelement

Browser-Kompatibilität

JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

HTML DOM API
HTMLTextAreaElement
Instanzeigenschaften
Instanzmethoden
Events
1. select
2. selectionchange
Vererbung
Verwandte Seiten für HTML DOM
Anleitungen
1. Verwenden von Microtasks in JavaScript mit queueMicrotask()
2. Im Detail: Microtasks und die JavaScript-Laufzeitumgebung