Javascript不适用于更改的值

时间:2017-12-28 23:02:28

标签: javascript input onblur

我得到了这个输入:

<input name='num2' type='number' id=num2 onblur="checkValue(this)">
        <script>
    function checkValue(input) {
    console.log(input.value);
  if (input.value > 20) {
     return input.value = 20;
  } else if (input.value < 0){
     return input.value = 0;
  } else if (input.value == '' || isNaN(input.value)) {
     return input.value = 0;
  } else {
     return input.value;
  }
}
$("#num1, #num2").focusout(function() {
    $("#answer").html('');
    var num1 = $("#num1").val();
    var num2 = $("#num2").val();
    var answer = num1 * num2;
    $("#answer").html(answer);
});
        </script>

问题是,当我写数字whitch高于20因此输入值改变,但是javascript仍然继续计算我编写的数字,例如100000.但是我希望javascript计数与onblur改变了价值。如果我走的正确,或者我应该使用其他一些脚本,请至少告诉我。

2 个答案:

答案 0 :(得分:0)

如果您运行下面的代码,您会看到focusout处理程序在<{strong> onblur处理程序之前被称为

&#13;
&#13;
function checkValue(input) {
  console.log('blur', input.value);
  if (input.value > 20) {
     input.value = 20;
  }
  else if (input.value < 0){
     input.value = 0;
  }
  else if (input.value == '' || isNaN(input.value)) {
     input.value = 0;
  }
  else {
     input.value;
  }

}
$("#num1, #num2").focusout(
  function() {
    $("#answer").html('');
    var num1 = $("#num1").val();
    var num2 = $("#num2").val();
    var answer = num1 * num2;
    console.log('focusout', num1, num2, answer);
    $("#answer").html(answer);
  }
);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name='num1' type='number' id=num1>
<input name='num2' type='number' id=num2 onblur="checkValue(this)">
<div id="answer"></div>
&#13;
&#13;
&#13;

因此,在计算num2之前,您不会限制answer中的数字。

也许您应该移动逻辑来限制num2处理程序中的onblur

<强>更新

以下示例将在计算总计数之前设置两个输入字段的限制。

  

如果这些例子都不符合您的要求,请解释您想要的结果,以便我们提供帮助。

&#13;
&#13;
function checkValue(input) {
  console.log('blur', input.value);
  if (input.value > 20) {
     input.value = 20;
  }
  else if (input.value < 0){
     input.value = 0;
  }
  else if (input.value == '' || isNaN(input.value)) {
     input.value = 0;
  }
  else {
     input.value;
  }

}
$("#num1, #num2").focusout(
  function() {
    $("#answer").html('');
    var $num1 = $("#num1");
    var $num2 = $("#num2");
    checkValue($num1[0]);
    checkValue($num2[0]);
    var num1 = $num1.val();
    var num2 = $num2.val();
    var answer = num1 * num2;
    console.log('focusout', num1, num2, answer);
    $("#answer").html(answer);
  }
);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name='num1' type='number' id=num1 onblur="checkValue(this)">
<input name='num2' type='number' id=num2 onblur="checkValue(this)">
<div id="answer"></div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

解决方案非常简单.. :)对不起这个话题..是的,我必须添加更多的值if if,但如果有人有更好的结果直接模糊请求发布

 <input name="num1" type='number' id=num1 value="<?php echo round($final5, 2); ?>" disabled><br />
 <input name='num2' type='number' id=num2 onblur="checkValue(this)">
        <script>
    function checkValue(input) {
    console.log(input.value);
  if (input.value > 10) {
     return input.value = 10;
  } else if (input.value < 0.09){
     return input.value = 0.1;
  }  else {
     return input.value;
  }

}

$("#num1, #num2").focusout(function() {
    $("#answer").html('');
    var num1 = $("#num1").val();
    var num2 = $("#num2").val();
    if (num2 > 10) {
        num2 = 10;
    } else if (num2 < 0.1 ) {
        num2 = 0.1;
    } else {
        num2;
    }
    var answer = num1 * num2;
    $("#answer").html(answer);
});
        </script>