Input-Felder sind eines der Hauptelemente von Webformularen. Sie ermöglichen es dem Benutzer, Daten einzugeben, die dann zur Verarbeitung an den Server gesendet werden können. Manchmal ist es notwendig, den Wert des Input-Felds auf Null zu setzen, um es von den zuvor eingegebenen Daten zu löschen. In diesem Artikel werden wir uns einige einfache Möglichkeiten ansehen, den Input-Wert in HTML und JavaScript auf Null zu setzen.
Die erste Methode besteht darin, das value-Attribut mit dem Wert einer leeren Zeichenfolge zu verwenden. Fügen Sie dazu einfach das value-Attribut mit dem Wert "" zum input-Tag hinzu. Zum Beispiel:
Wenn Sie den Input-Wert bei einem bestimmten Ereignis zurücksetzen möchten, z. B. wenn Sie auf eine Schaltfläche klicken, können Sie JavaScript verwenden. Dazu binden Sie einen Ereignishandler an ein Schaltflächenelement, das den input-Wert in eine leere Zeichenfolge ändert. Zum Beispiel:
Beachten Sie, dass in diesem Beispiel das id-Attribut verwendet wird, um mithilfe von JavaScript auf das input-Element zuzugreifen. Der ID-Wert muss innerhalb der Seite eindeutig sein.
So setzen Sie den Input-Wert zurück: Einfache Möglichkeiten
1. Setzen Sie den Input-Wert mit der Schaltfläche "Zurücksetzen" zurück
Am einfachsten können Sie den Wert eines Eingabefeldes zurücksetzen, indem Sie der Seite eine Schaltfläche "Zurücksetzen" mit dem Attribut type="reset" hinzufügen und sie mithilfe des form-Attributs an das Eingabefeld binden. Wenn Sie auf die Schaltfläche "Zurücksetzen" klicken, wird der Wert des Eingabefeldes auf den Anfangswert oder eine leere Zeile zurückgesetzt.
2. Setzen Sie den Input-Wert mit JavaScript zurück
Wenn Sie das Eingabefeld programmgesteuert zurücksetzen möchten, können Sie JavaScript verwenden. Dazu müssen Sie mit der document-Methode auf das Element zugreifen.getElementById() oder andere Methoden arbeiten mit DOM und verwenden Sie die value-Eigenschaft, um den Feldwert zu ändern. Um beispielsweise den Wert input mit zurückzusetzen, müssen Sie den folgenden Code verwenden:
3. Setzen Sie den Input-Wert mit jQuery zurück
Wenn eine Seite eine jQuery-Bibliothek verwendet, können Sie mit ihren Methoden den Wert des Eingabefeldes zurücksetzen. Dazu wählen Sie ein Element mit einem Selektor aus und verwenden die val() -Methode, um den Wert des Feldes zu ändern. Um beispielsweise den Wert input mit zurückzusetzen, müssen Sie den folgenden Code verwenden:
JavaScript verwenden
Wenn Sie den Wert eines Eingabefelds mit JavaScript auf Null setzen möchten, können Sie den folgenden Code verwenden:
document.getElementById("myInput").value = "";
In diesem Code verwenden wir die Methode getElementById() um auf das Element mit der angegebenen ID zuzugreifen. Dann legen wir die Eigenschaft fest value ein Element in eine leere Zeichenfolge, um seinen Wert auf Null zu setzen.
Sie können auch JavaScript-Ereignisse verwenden, um den Wert eines Eingabefeldes zu einem bestimmten Zeitpunkt auf Null zu setzen. Sie können beispielsweise einen Ereignishandler hinzufügen onclick zu einer Schaltfläche, um den Wert des Eingabefeldes zurückzusetzen, wenn Sie darauf klicken:
In diesem Beispiel erstellen wir ein Eingabefeld mit der ID "myInput" und eine Schaltfläche mit einem Onclick-Ereignishandler, der den JavaScript-Code aufruft, um den Wert des Eingabefeldes auf Null zu setzen.
Beachten Sie, dass die Verwendung von JavaScript zum Zurücksetzen eines Eingabefelds nützlich sein kann, wenn Sie dem Benutzer die Möglichkeit geben möchten, den Wert selbst zurückzusetzen, ohne die Seite neu zu laden.
Verwenden der Reset-Taste
Sie können den Wert des Input-Felds im HTML-Formular mit der speziellen Schaltfläche-Zurücksetzen zurücksetzen.
Um eine Reset-Schaltfläche zu erstellen, müssen Sie ein Element mit dem Attribut type="reset" innerhalb des Tags hinzufügen.
Wenn der Benutzer auf die Schaltfläche-Zurücksetzen klickt, werden alle Formularfelder auf ihre ursprünglichen Werte zurückgesetzt.
Beachten Sie, dass die Reset-Schaltfläche in verschiedenen Browsern ihren eigenen einzigartigen Stil hat, so dass sie auf verschiedenen Geräten unterschiedlich aussehen kann.
Daher ist die Verwendung der Reset-Schaltfläche eine einfache und bequeme Möglichkeit, die Werte von Input-Feldern in einem HTML-Formular auf Null zu setzen.
Verwenden der Reset-Methode
Um die Methode zu verwenden reset, Sie müssen eine Schaltfläche hinzufügen reset hinein form. Wenn Sie auf diese Schaltfläche klicken, werden die Werte aller Formularelemente auf die ursprünglichen HTML-Werte zurückgesetzt.
Um beispielsweise eine Reset-Schaltfläche für ein Formular zu erstellen, fügen Sie den folgenden Code hinzu:
Diese Schaltfläche wird auf der Seite angezeigt, und wenn Sie darauf klicken, werden die Werte aller Formularelemente zurückgesetzt.
Methode reset nützlich, wenn Sie alle Formularfelder mit einer einzigen Aktion zurücksetzen möchten. Wenn Sie nur ein bestimmtes Feld auf Null setzen möchten, können Sie andere Methoden oder Skripte verwenden, dies ist jedoch ein komplizierterer Ansatz.
Verwenden von jQuery
Fügen Sie dazu dem Skriptblock den folgenden Code hinzu:
$('input').val('');In diesem Beispiel verwenden wir einen Selektor $('input'), um alle Elemente auszuwählen input auf der Seite.
Verwenden Sie dann die Methode val('') wir weisen allen ausgewählten Elementen einen leeren Wert zu,
dadurch wird ihr aktueller Wert auf Null gesetzt.
Verwenden eines CSS-Pseudoelements
Um diese Methode zu verwenden, müssen Sie den folgenden CSS-Code hinzufügen:
input::afterDer Wert des Eingabefeldes wird nun leer angezeigt, auch wenn Sie Text eingegeben haben. Dies ist besonders nützlich, wenn Sie ein Eingabefeld mit einem voreingestellten Wert erstellen möchten, das automatisch verschwindet, wenn Sie neuen Text eingeben.
