HTMLTextAreaElement

Erbt auch Eigenschaften von seinem Eltern-Interface, HTMLElement.

autocomplete

Ein String, der das autocomplete Attribut des Elements darstellt.

cols

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

defaultValue

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

dirName

Ein String, der die Richtung des Elements darstellt.

disabled

Ein Boolean, der das disabled Attribut des Elements darstellt, welches anzeigt, dass das Steuerelement nicht zur Interaktion verfügbar ist.

form Schreibgeschützt

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

labels Schreibgeschützt

Gibt eine NodeList der mit diesem Element verknüpften <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 ausgewertet, 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 kann. Diese Einschränkung wird nur ausgewertet, wenn sich der Wert ändert.

name

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

placeholder

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

readOnly

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

required

Ein Boolean, der das required Attribut des Elements darstellt, welches 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 das Steuerelement angibt.

selectionDirection

Ein String, der die Richtung darstellt, in der die Auswahl erfolgt ist. Dies ist forward, wenn die Auswahl in der Start-zum-Ende-Richtung der aktuellen Sprache erfolgte, 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 darstellt. Wenn kein Text ausgewählt ist, enthält es den Index des Zeichens, das dem Eingabecursor folgt. Beim Setzen verhält sich das Steuerelement, als ob setSelectionRange() mit diesem als zweiten Argument und selectionStart als erstem 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. Beim Setzen verhält sich das Steuerelement, als ob setSelectionRange() mit diesem als erstem Argument und selectionEnd als zweitem Argument aufgerufen worden wäre.

textLength Schreibgeschützt

Gibt die Länge der Codepunkte des value des Steuerelements zurück. Dasselbe wie value.length lesen.

type Schreibgeschützt

Gibt den String textarea zurück.

validationMessage Schreibgeschützt

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

validity Schreibgeschützt

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

value

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

willValidate Schreibgeschützt

Gibt zurück, ob das Element ein Kandidat für die Einschränkungsvalidierung ist. false, wenn es Bedingungen gibt, die es von der Validierung 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 das Steuerelement Text umbricht.

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 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 Probleme vorliegen, löst es ein abbrechbares invalid Ereignis am Element aus und gibt false zurück; wenn keine Probleme vorliegen, 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 an einem benutzerdefinierten Validierungsfehler und ist nicht gültig.

setRangeText()

Ersetzt einen Textbereich im Element durch neuen Text.

setSelectionRange()

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

Erbt auch Ereignisse von seinem Eltern-Interface, HTMLElement.

Hören Sie diese Ereignisse mithilfe von addEventListener() oder durch Zuweisung eines Ereignis-Listeners an die oneventname Eigenschaft dieses Interfaces:

select Ereignis

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

selectionchange Ereignis Experimentell

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

Lassen Sie ein Textfeld beim Tippen automatisch wachsen:

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>

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

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, um sich wie ein Link zu verhalten:

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

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