jquery como esvaziar o campo de entrada

199

Estou em um aplicativo móvel e uso um campo de entrada para que o usuário envie um número.

Quando eu voltar e voltar à página em que o campo de entrada apresenta a última entrada de número exibida no campo de entrada.

Existe alguma maneira de limpar o campo toda vez que a página é carregada?

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

Respostas:

418

Você pode limpar o campo de entrada usando $('#shares').val('');

shaunsantacruz
fonte
2
Isso funciona e é compatível com as especificações se tivermos uma entrada numérica como essa <input type="number" min="0' max="10" value="5"></input>? Acho que, dito de forma diferente, você pode definir uma entrada numérica para ficar em branco?
Kevin Wheeler
3
Que tal .val([])?
precisa saber é o seguinte
3
Em uma nota relacionada, .val([])também é possível desmarcar qualquer opção selecionada na lista de seleção ... nem tanto .val(''). A melhor coisa é o suporte a vários navegadores. PS: Essa é uma alternativa a apenas outra solução eficiente entre navegadores - $("select option").prop("selected", false);mas funciona com todas as entradas. Graças a Jon por um teste que ele criou .
precisa saber é o seguinte
29 
$(document).ready(function(){
  $('#shares').val('');
});
osahyoun
fonte
10

Ao enviar o formulário, use o método de redefinição no formulário. O método reset () redefine os valores de todos os elementos em um formulário.

$('#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>
Expandir snippet

Radhika
fonte
Pode ajudar alguém, mas neste contexto sua resposta é inútil.
Marco Concas
8

A configuração val('')esvaziará o campo de entrada. Então você usaria isso:

Limpe o campo de entrada quando a página carregar:

$(function(){
    $('#shares').val('');
});
Francis Lewis
fonte
4

Como você está usando o jQuery, que tal usar um reset de gatilho :

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

Para redefinir as entradas de texto, número, pesquisa e área de texto:

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

Para redefinir, selecione:

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

Para redefinir a entrada de rádio:

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

Para redefinir a entrada do arquivo:

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

se você pressionar o botão "voltar", normalmente ele tende a ficar preso, o que você pode fazer é quando o formulário é enviado, limpar o elemento e, em seguida, antes de ir para a página seguinte, mas depois de fazer com o elemento o que você precisa.

    $('#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
fonte