Como detectar a mudança em uma caixa de entrada de texto em jQuery

votos
0

Eu tenho caixa de texto de entrada de duas texto e eu quero fazer o total de tudo o que não é digitado pelo usuário. Abaixo está o meu código:

$(document).ready(function(){
    var total = 0;
    $(.test).on(input, function(){
        // Print entered value in a div box
        total += parseInt($(this).val());
        $(#result).text(	total);
    });
});
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js></script>
<p><input type=text class=test placeholder=Type something... id=myInput></p>
    <p><input type=text class=test placeholder=Type something... id=myInput></p>
    <div id=result></div>

Quando eu input 10primeiro, em seguida, é preciso 11, em seguida, se eu digitar 100, então é preciso 111, eu não estou recebendo por isso que esta acontecendo. Onde eu estou fazendo um erro, me orientar?

Publicado 24/10/2019 em 12:52
fonte usuário
Em outras línguas...                            


3 respostas

votos
2

Em seu código quando você introduzir o primeiro dígito tem sido calculado ao total devido total += parseInt($(this).val()). por exemplo, se o seu primeiro dígito é 1 então naquele tempo total está atualizando como total = 1, no segundo keypress, por exemplo, tomar 0, então o seu total de entrada se torna 10. É o cálculo para o valor total atual como total = total + 10. é por isso que você está recebendo 11 como resposta

Tente assim.

$(document).ready(function(){
    var total = 0;
    $(".test").on("input", function(){
        // Print entered value in a div box
        if ($("#myInput1").val() && $("#myInput2").val()) {
           total = parseInt(parseInt($("#myInput1").val()) + parseInt($("#myInput2").val()));
           $("#result").text(total);
        }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input type="text" class="test" placeholder="Type something..." id="myInput1"></p>
<p><input type="text" class="test" placeholder="Type something..." id="myInput2"></p>
<div id="result"></div>

Respondeu 24/10/2019 em 12:58
fonte usuário

votos
0

A razão não mostrou o resultado que você quer, é porque o cálculo está errado. Agora você adicionar o número do total, cada vez que um alterações do campo de entrada. Então, se você digitar 123, que leva 0 + 1, então 1 + 12, então 13 + 123, assim você terá 136 como resultado.

Eu escrevi uma possível solução para sua pergunta. O código está no violino abaixo.

Você pode adicionar uma função onde você calcular o total de todos os campos de entrada (pode ser mais de 2, é genérico).

function calculateTotal(){
  var total = 0;
    $( ".test" ).each(function( index ) {
      var value = $(this).val();
      if(value == ""){
        return;
      }
      total += parseInt(value);

    });
  $("#result").text(    total);
}

E sobre a mudança de seus campos de entrada, basta executar essa função.

$(document).ready(function(){
    var total = 0;
    $(".test").on("input", function(){
        calculateTotal();
    });
});

Seu exemplo é neste violino: https://jsfiddle.net/xL6hgder/2/

Respondeu 24/10/2019 em 13:01
fonte usuário

votos
0

Use o evento de alteração em vez do evento de entrada. Ele só será acionado quando o valor é "comprometida", em vez de cada tecla pressionada. Veja MDN para mais detalhes.

Respondeu 24/10/2019 em 12:59
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more