Für Webentwickler ist jQuery eine sehr nützliche Bibliothek, die JavaScript-Code prägnanter und leichter lesbar machen kann. In jQuery gibt es viele Methoden, die Entwicklern helfen, HTML-Elemente einfach abzurufen und zu bearbeiten.
Dieser Artikel konzentriert sich darauf, wie jQuery den Textbereich (Textarea) erhält.
Wenn Sie mit Textfeldern nicht vertraut sind, können Sie sich diese zunächst einmal kurz ansehen. Ein Textfeld ist ein Formularsteuerelement in HTML, das Benutzern die Eingabe mehrerer Textzeilen ermöglicht. Textfelder werden normalerweise in Szenarien wie Benutzerkommentaren und Nachrichteneingaben verwendet.
In jQuery ist es sehr einfach, den Wert eines Textfelds abzurufen. Angenommen, wir haben ein Textfeldelement:
<textarea id="myTextArea"></textarea>
Um den Wert dieses Textfelds zu erhalten, können Sie die Methode .val() verwenden. Der folgende Code ruft beispielsweise den Wert des Textfelds ab und gibt ihn an die Konsole aus:
var textAreaValue = $('#myTextArea').val();
console.log(textAreaValue);Wenn der Benutzer einen Wert in das Textfeld eingibt und auf die Schaltfläche „Senden“ klickt, müssen Sie möglicherweise jQuery verwenden, um den Wert abzurufen und an den Server senden. Hier ist der Beispielcode:
$('#submitButton').on('click', function() {
var textAreaValue = $('#myTextArea').val();
$.ajax({
url: 'submit.php',
method: 'post',
data: {textAreaValue: textAreaValue},
success: function(response) {
console.log(response);
},
error: function() {
console.log('There was an error submitting the form.');
}
});
});Der obige Code sendet eine AJAX POST-Anfrage an subscribe.php, wenn auf die Schaltfläche „Senden“ geklickt wird, wobei die Anfragedaten den Wert des Textfelds enthalten. Im Erfolgsfall wird die Antwort auf der Konsole ausgegeben.
Wenn Sie außerdem den Wert des Textfelds dynamisch ändern müssen, können Sie den folgenden Code verwenden:
$('#myTextArea').val('New Value');Der obige Code ersetzt den ursprünglichen Wert im Textfeld durch den neuen Text.
Wenn Sie dem Textbereich Standardtext hinzufügen müssen, können Sie dies tun, indem Sie das Attribut placeholder zum Tag