键盘功能无法处理表单输入

时间:2015-12-17 00:42:04

标签: javascript jquery html

希望有人可以解决我的问题。我有三个输入字段,在填充所有三个字段时计算公式。我使用keyup函数来检测字段何时有内容,但对于我的生活,我无法让它工作。任何帮助都将非常感激。

      $(".input-sm").each(function() {
          $(this).keyup(function() {
            calculateStuff();
          });
        });

        function calculateStuff() {

            //add only if the value is number
            if (!isNaN($('#pa').val()) && $('#pa').val().length != 0) {
              pa = parseFloat(this.value);
            }
            if (!isNaN($('#de').val()) && $('#de').val().length != 0) {
              de = parseFloat(this.value);
            }
            if (!isNaN($('#pr').val()) && $('#pr').val().length != 0) {
              pr = parseFloat(this.value);
            }

          re = pa + de + pr;
          stuff = ((pr - de) / (re)) * 100;
          $("#value").html(stuff);
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="value" class="m-t-50">Stuff = 0</h1>
<input type="text" class="form-control input-sm" id="de">
<input type="text" class="form-control input-sm" id="pa">
<input type="text" class="form-control input-sm" id="pr">

2 个答案:

答案 0 :(得分:1)

1st:您可以使用.keyup而无需.each

$(".input-sm").on('keyup',function() {
   calculateStuff($(this));
});

第二名尝试在转到if statments

之前将变量定义为0

第3名 this.value将不返回任何内容,因此将el传递给您的函数$(el).val()并在keyup中使用

function calculateStuff(el) {
     var pa = 0, de = 0, pr = 0 , re = 0, stuff = 0;
     //add only if the value is number
     if (!isNaN($('#pa').val()) && $('#pa').val().length != 0) {
        pa = parseFloat($(el).val());
     }
     if (!isNaN($('#de').val()) && $('#de').val().length != 0) {
        de = parseFloat($(el).val());
     }
     if (!isNaN($('#pr').val()) && $('#pr').val().length != 0) {
         pr = parseFloat($(el).val());
     }

  re = pa + de + pr;
  stuff = ((pr - de) / (re)) * 100;
  $("#value").html(stuff);
}

答案 1 :(得分:0)

我试过你的代码。你在控制语句中使用(this.value)并且“this”是未定义的,你实际上没有从它来自哪里引用。将您的(this.value)替换为输入元素的相应ID,就像这样=&gt; ($( '#PA')。VAL())。      //例如。      pa = parseFloat($('#pa')。val()); 我测试了它,它工作正常。