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 11:52
fonte usuário
Em outras línguas...                            


5 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 11:58
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 11:59
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 12:01
fonte usuário

votos
1

Você acabou de atualizar total, com esse valor de entrada que você está tentando mudar.

Para obter o total para ambos os valores de entrada você tem que tomar os dois valores e adicioná-lo com o total.

Tente abaixo code-

$(document).ready(function() {
  $(".test").on("change", function() {
    var total = 0;
    $('.test').each(function() {
      if (!isNaN(parseInt($(this).val()))) {
        total += parseInt($(this).val());
      }
    });
    // Print entered value in a div box

    $("#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>

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

votos
0
 $(document).ready(function () {
        $(".test").on('input', function () {
            var total = parseInt($("#result").text());
            total = parseInt($("#myInput").val()) + parseInt($("#myInput1").val());
            $("#result").text(total);
        });
    });

 <p><input type="text" class="test" placeholder="Type something..." id="myInput" /></p>
    <p><input type="text" class="test" placeholder="Type something..." id="myInput1" /></p>
    <div id="result"></div>
Respondeu 24/10/2019 em 12:26
fonte usuário

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