HTMLTextAreaElement

Erbt auch Eigenschaften von seiner Elternschnittstelle, 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 der Steuerung 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 und anzeigt, dass die Steuerung nicht für die 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 verbundenen <label>-Elemente zurück.

maxLength

Eine Zahl, die das maxlength-Attribut des Elements darstellt und die maximale Anzahl an 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 an Zeichen angibt, die der Benutzer eingeben kann. 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 darauf gibt, was der Benutzer in die Steuerung eingeben soll.

readOnly

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

required

Ein Boolean, der das required-Attribut des Elements darstellt, das angibt, dass der Benutzer einen Wert angeben muss, bevor das Formular gesendet wird.

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 der Selektion angibt. Dies ist forward, wenn die Selektion in der Start-zu-End-Richtung der aktuellen Region 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 darstellt. Wenn kein Text ausgewählt ist, enthält sie den Index des Zeichens, das dem Eingabecursor folgt. Wird diese Eigenschaft gesetzt, verhält sich die Steuerung so, als wäre setSelectionRange() mit diesem als zweites Argument und selectionStart als erstes 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, das dem Eingabecursor folgt. Wird diese Eigenschaft gesetzt, verhält sich die Steuerung so, als wäre setSelectionRange() mit diesem als erstes Argument und selectionEnd als zweites Argument aufgerufen worden.

textLength Schreibgeschützt

Gibt die Codepunktlänge des value der Steuerung zurück. Entspricht dem Lesen von value.length.

type Schreibgeschützt

Gibt den String textarea zurück.

validationMessage Schreibgeschützt

Gibt eine lokalisierte Nachricht zurück, die die Validierungsbeschränkungen beschreibt, die die Steuerung nicht erfüllt (falls vorhanden). Dies ist ein leerer String, wenn die Steuerung kein Kandidat für die Einschränkungsvalidierung ist (willValidate ist false) oder 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 unverarbeiteten Wert in der Steuerung darstellt.

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 seiner readOnly oder disabled Eigenschaft ist true.

wrap

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

Erbt auch Methoden von seiner Elternschnittstelle, 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 an der Steuerung aus. 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 berichtet dem Benutzer über 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 keine Probleme vorliegen, gibt es true zurück.

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 Gültigkeitsfehler und validiert nicht.

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 seiner Elternschnittstelle, HTMLElement.

Diese Ereignisse können Sie mithilfe von addEventListener() oder durch Zuweisen eines Ereignis-Listeners an die oneventname-Eigenschaft dieser Schnittstelle abhören:

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.

Lassen Sie ein Textarea 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 Textarea 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, damit es sich wie ein Link verhält:

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