jquery wie man das Eingabefeld leert

199

Ich bin in einer mobilen App und verwende ein Eingabefeld, um dem Benutzer eine Nummer zu übermitteln.

Wenn ich zurückkehre und zur Seite zurückkehre, zeigt dieses Eingabefeld die letzte im Eingabefeld angezeigte Zahleneingabe an.

Gibt es eine Möglichkeit, das Feld bei jedem Laden der Seite zu löschen?

$('#shares').keyup(function(){
    payment = 0;
    calcTotal();
    gtotal = ($('#shares').val() * 1) + payment;
    gtotal = gtotal.toFixed(2);
    $("p.total").html("Total Payment: <strong>" + gtotal + "</strong>");
});

— Kosbou
quelle

417

Sie können das Eingabefeld mit löschen $('#shares').val('');

— shaunsantacruz
quelle

2

Funktioniert dies und ist es spezifikationskonform, wenn wir eine solche numerische Eingabe haben <input type="number" min="0' max="10" value="5"></input>? Ich denke anders gesagt, dürfen Sie eine numerische Eingabe so einstellen, dass sie leer ist?

— Kevin Wheeler

3

Wie wäre es .val([])?

— Fr0zenFyr

3

In einem verwandten Hinweis .val([])kann auch die Auswahl einer ausgewählten Option in der Auswahlliste aufgehoben werden ... nicht so sehr mit .val(''). Das Beste daran ist die browserübergreifende Unterstützung. PS: Dies ist eine Alternative zu nur anderen effizienten Cross-Browser-Lösungen - $("select option").prop("selected", false);funktioniert jedoch mit allen Eingaben. Vielen Dank an Jon für einen Test, den er erstellt hat .

— Fr0zenFyr

29

$(document).ready(function(){
  $('#shares').val('');
});

— osahyoun
quelle

10

Verwenden Sie beim Absenden des Formulars die Rücksetzmethode für das Formular. Die Methode reset () setzt die Werte aller Elemente in einem Formular zurück.

$('#form-id')[0].reset();

OR 

document.getElementById("form-id").reset();

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset

$("#submit-button").on("click", function(){
       //code here
       $('#form-id')[0].reset();
});

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form id="form-id">
  First name:<br>
  <input type="text" name="firstname">
  <br>
  Last name:<br>
  <input type="text" name="lastname">
  <br><br>
  <input id="submit-button" type="submit" value="Submit">
</form> 
</body>
</html>

Erweitern Sie das Snippet

— Radhika
quelle

Kann jemandem helfen, aber in diesem Zusammenhang ist Ihre Antwort nutzlos.

— Marco Concas

8

Durch die Einstellung val('')wird das Eingabefeld geleert. Also würden Sie dies verwenden:

Löschen Sie das Eingabefeld, wenn die Seite geladen wird:

$(function(){
    $('#shares').val('');
});

— Francis Lewis
quelle

4

Wie wäre es mit einem Trigger- Reset, da Sie jQuery verwenden :

$(document).ready(function(){
  $('#shares').trigger(':reset');
});

— Sablefoste
quelle

3

So setzen Sie die Eingaben für Text, Nummer, Suche und Textbereich zurück:

$('#shares').val('');

Zum Zurücksetzen wählen Sie:

$('#select-box').prop('selectedIndex',0);

So setzen Sie den Radioeingang zurück:

$('#radio-input').attr('checked',false);

So setzen Sie die Dateieingabe zurück:

$("#file-input").val(null);

— Hühner
quelle

0

Wenn Sie auf die Schaltfläche "Zurück" klicken, bleibt diese normalerweise hängen. Wenn das Formular gesendet wird, löschen Sie das Element, bevor es zur nächsten Seite wechselt, aber nachdem Sie mit dem Element das getan haben, was Sie benötigen.

    $('#shares').keyup(function(){
                payment = 0;
                calcTotal();
                gtotal = ($('#shares').val() * 1) + payment;
                gtotal = gtotal.toFixed(2);
                $('#shares').val('');
                $("p.total").html("Total Payment: <strong>" + gtotal + "</strong>");
            });

— chris
quelle