jQuery Setzwert des Textbereichs
-
.val()vs..attr() -
Verwenden Sie die
.val()-Methode, um den Wert destextareafestzulegen -
Verwenden Sie die Methode
.attr(), um den Wert für denTextbereichfestzulegen
In JavaScript instanziieren wir über die Methode querySelector() eine Instanz des HTML element, id oder class. Aber für die Beispiele in diesem Tutorial verwenden wir jQuery(#id).
Auch hier gibt es andere Konventionen, um Werte für den Textbereich festzulegen, wie das Hinzufügen geeigneter Attribute im HTML-Tag usw. Wir werden uns also nicht auf die DOM-Manipulation konzentrieren, sondern das Problem mit jQuery lösen.
Im heutigen Tutorial lernen wir die Verwendung der Methoden .val() und .attr() kennen, um den Wert des Textbereichs in JQuery festzulegen.
.val() vs. .attr()
Die Methode .val(), die in jQuery verwendet wird, um den Wert für input oder textarea zu setzen, zeigt einen string. Standardmäßig bleibt der Textbereich leer, aber eine Zeile, ein Wort oder eine vordefinierte Erklärung kann eine klare Vorstellung davon geben, was in diesem Bereich zu tun ist.
Normalerweise finden wir für die meisten input-Tags das value-Attribut, um eine Standardzeichenfolge festzulegen. Aber im Fall des textarea-Tags gibt es kein value-Attribut; stattdessen gibt es ein placeholder-Attribut. Wir werden nun die Instanzen untersuchen, die diese Lösungen im Codesegment darstellen.
Verwenden Sie die .val()-Methode, um den Wert des textarea festzulegen
In unserem Beispiel haben wir einen Textbereich mit fester Bemaßung. Außerdem werden wir eine id dafür hinzufügen. Die Aufgabe ist einfach; Nehmen Sie eine Instanz für dieses Tag mit der angegebenen id und wenden Sie die Methode .val() an.
Übergeben Sie innerhalb der Methode eine Zeichenfolge (z. B.: "Dies ist ein Textbereich"), oder speichern Sie die Zeichenfolge in einer Variablen und übergeben Sie sie dann. Aber lassen Sie uns zuerst den Codezaun visualisieren.
Code-Auszug:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<title>array loop through</title>
</head>
<body>
<textarea name="txt" id="txt" cols="30" rows="10"></textarea>
<script>
var str = "This is TextArea 1";
$("#txt").val(str);
</script>
</body>
</html>
Ausgang:
Wie zu sehen ist, wurde der Wert im Textbereichsfeld als Zeichenfolge festgelegt. Möglicherweise können Sie feststellen, dass die Zeichenfolge entfernbar ist. Diese Konvention scheint etwas veraltet oder einfach nicht cool genug zu sein. Gehen wir also zum folgenden Beispiel.
Verwenden Sie die Methode .attr(), um den Wert für den Textbereich festzulegen
Die Methode .attr() setzt speziell den Attributwert für jedes HTML-Element. Es ist die Hauptmethode, Attribute nicht zusammen mit den DOM-Elementen zu setzen, sondern sie über jQuery oder JavaScript zu verwenden, da sie nach Wahl dynamisch gehandhabt werden können.
Hier werden wir jedoch die Parameter für die Methode festlegen, und das Element textarea hat ein validiertes Attribut namens placeholder. Also geben wir den ersten Parameter Platzhalter und das zweite Argument ist der Wert. Aber lassen Sie uns zuerst die Codezeilen überprüfen.
Code-Auszug:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<title>array loop through</title>
</head>
<body>
<textarea name="txt" id="txt" cols="30" rows="10"></textarea>
<script>
var str = "This is TextArea 2";
$("#txt").attr("placeholder", str);
</script>
</body>
</html>
Ausgang:
Und die Ausgabe zeigt, dass der übergebene String in der Methode .attr() als Platzhalterwert gesetzt wurde. Und dies ist eine integriertere und intelligentere Ansicht als die Einstellung der Ansicht eines Textbereichs.
