Es gibt mehrere JavaScript-Methoden, mit denen der Wert eines Texteingabefelds abgerufen werden kann. Mit der Methode jQuery .val() können wir auf den Wert eines Texteingabefelds in einem Skript zugreifen oder ihn festlegen.
Die Aufgabe, die wir in diesem Artikel ausführen werden, besteht darin, HTML-Eingabewerte zu berechnen und sie direkt mit JQuery anzuzeigen. Lassen Sie uns in diesen Artikel eintauchen, um es besser zu verstehen.
Um den Wert von Formularkomponenten wie Eingabe, Auswahl und Textbereich abzurufen, verwenden Sie die Funktion .val(). Wenn es für eine leere Sammlung aufgerufen wird, wird undefiniert zurückgegeben.
Das Folgende ist die Syntax der .val()-Methode
$(selector).val()
Im folgenden Beispiel führen wir ein Skript aus, das HTML-Eingabewerte berechnet und diese direkt auf der Webseite anzeigt.
<!DOCTYPE html>
<html>
<body style="text-align:center; background-color:#D5F5E3;">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="tutorial">
<form>
<div class="tutorial">
<label for="">ActualPrice</label>
<input type="text" id="price" required class="price form-control" />
</div>
<div class="tutorial">
<label for="">Discount</label>
<input type="text" id="discount" required class="discount form-control" />
</div>
<div class="tutorial">
<label for="">Amount</label>
<input type="text" id="amount" required class="amount form-control" readonly />
</div>
<button type="submit">Pay</button>
</form>
</div>
<script>
$('form input').on('keyup', function() {
$('#amount').val(parseInt($('#price').val() - $('#discount').val()));
});
</script>
</body>
</html>
Wenn das Skript ausgeführt wird, generiert es eine Ausgabe bestehend aus Eingabefeldern und angeklickten Schaltflächen auf der Webseite. Wenn der Benutzer mit der Eingabe eines Werts beginnt, werden Preis und Rabatt abgezogen und der Betrag angezeigt.
Die chinesische Übersetzung vonBetrachten Sie die folgenden Beispiele, in denen wir ein Skript ausführen, um Eingabewerte direkt auf einer Webseite anzuzeigen.
<!DOCTYPE html>
<html>
<body style="text-align:center; background-color:#E8DAEF;">
<style>
div {
color: #DE3163;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name" id="tutorial">
<div></div>
<script>
$("#tutorial").keyup(function(event) {
text = $(this).val();
$("div").text(text);
});
</script>
</body>
</html>
Nachdem Sie das obige Skript ausgeführt haben, wird das Ausgabefenster mit den Eingabefeldern auf der Webseite angezeigt. Wenn der Benutzer mit dem Ausfüllen des Eingabefelds beginnt, wird der Text mit angewendetem CSS direkt auf der Webseite angezeigt.
Die chinesische Übersetzung vonFühren Sie das folgende Skript aus, um zu sehen, wie wir den eingegebenen Text direkt auf der Webseite anzeigen können.
<!DOCTYPE html>
<html>
<body style="background-color:#CCCCFF">
<input type="text" id="tutorial">
<button type="button" id="tutorial1">Click To Show Value</button>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$("#tutorial1").click(function() {
var result = $("#tutorial").val();
alert(result);
});
})
</script>
</body>
</html>
Wenn das Skript ausgeführt wird, generiert es eine Ausgabe auf der Webseite, die die Eingabefelder und angeklickten Schaltflächen enthält. Wenn der Benutzer Text eingibt und auf die Schaltfläche klickt, wird auf der Webseite eine Warnung mit dem Text des Eingabefelds angezeigt.
Das obige ist der detaillierte Inhalt vonWie berechnet man den HTML-Eingabewert mit jQuery und zeigt den Eingabewert direkt an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
