如何通过键盘敲击来计算输入值

Question

我有5个输入标签：

$(".value").keydown(function(event) {
  var ok = 48;
  var it = 57;
  if (event.which >= ok && event.which <= it || event.which == 8) {
  } else if (event.which == 9) {
    var num1 = parseInt($("#num1").val());
    var num2 = parseInt($("#num2").val());
    var num3 = parseInt($("#num3").val());
    var num4 = parseInt($("#num4").val());
    if (num1 && num2) {
      $("#num3").html(num1 + num2);
    } else if (num3 && num4) {
      $("#num5").val(num3 + num4); //on this line it's not showing the value, i dont know what it's going on
    }
  } else {
    event.preventDefault();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="num1" class="value">
<input type="text" id="num2" class="value">
<input type="text" id="num3" class="value">
<input type="text" id="num4" class="value">
<input type="text" id="num5" class="value">

如果我在#num1和#num2上输入值，那么我在键盘上按TAB，结果显示在#num3上;完成。

但是，如果我输入＃num4，那么我按键盘上的TAB，它没有显示在#num5上。

Answer 1

你试试这个

$(".value").keydown(function(event) {

var $val = jQuery(this).val().replace(/\D/g, '');
                if (isNaN($val)) {
                    $val = 0;
                }
 jQuery(this).val($val);// replace to allow number only 
  var ok = 48;
  var it = 57;

  if (event.which >= ok && event.which <= it || event.which == 8) {
  } else if (event.which == 9) {
    var num1 = parseInt($("#num1").val());
    var num2 = parseInt($("#num2").val());
    var num3 = parseInt($("#num3").val());
    var num4 = parseInt($("#num4").val());
    if (num1 && num2) {
      $("#num3").val(num1 + num2);
    }
    if (num3 && num4) {
      $("#num5").val(num3 + num4); //on this line it's not showing the value, i dont know what it's going on
    }
  } else {
    event.preventDefault();
  }
});

https://www.w3schools.com/code/tryit.asp?filename=FOVZ9DFZ00LO

Answer 2

使用type=number更容易

$(function(){
	function parser(d){
		return isNaN(parseInt(d)) ? 0 : parseInt(d);
	}
	
	$('#num1, #num2').change(function(){
		$('#num3').val(parser($('#num1').val()) + parser($('#num2').val())).change();
	});
	$('#num3, #num4').change(function(){
		$('#num5').val(parser($('#num3').val()) + parser($('#num4').val()));
	});
	
  //second code
  
  $('#num11, #num22').change(function(){
		$('#num33').val(parser($('#num11').val()) + parser($('#num22').val())).change();
	});
	$('#num33, #num44').change(function(){
		$('#num55').val(parseInt($('#num33').val()) + parseInt($('#num44').val())).change();
	});
  
  $('#num33').change(function(){
    if(parser($('#num33').val()) == parser($('#num11').val()) + parser($('#num22').val())){
      $('#num33').removeClass('red');
    } else{
      $('#num33').addClass('red');
    }
  });
	
  
  $('#num55').change(function(){
    if(parser($('#num55').val()) == parser($('#num33').val()) + parser($('#num44').val())){
      $('#num55').removeClass('red');
    } else{
      $('#num55').addClass('red');
    }
  });
  
});

.red{border: 2px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="number" id="num1" class="value">
<input type="number" min="0" id="num2" class="value">
<input type="number" min="0" readonly id="num3" class="value">
<input type="number" id="num4" class="value">
<input type="number" readonly id="num5" class="value">

<hr>
if you dont want set readonly, probably you will do like below:<br>

<input type="number" id="num11" class="value">
<input type="number" id="num22" class="value">
<input type="number" id="num33" class="value">
<input type="number" id="num44" class="value">
<input type="number" id="num55" class="value">