Baseline Widely available *
Das HTMLTextAreaElement
-Interface bietet Eigenschaften und Methoden zur Manipulation des Layouts und der Präsentation von <textarea>
-Elementen.
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.
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).
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.
Ein Textfeld beim Tippen automatisch vergröÃern lassen:
JavaScriptfunction 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 für das Einfügen von HTML-Tags
Einige HTML-Tags in ein Textfeld einfügen:
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: 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-Kompatibilität
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4