Question

我有一个有三个输入的表格。我希望能够填写两个字段并自动填充第三个字段。

所以，它应该像这样工作：
- 我填写第一个和第二个，第三个计算得出 - 我填写第一个和最后一个，第二个得到计算
- 我填写第二个和最后一个，第一个计算

我想出了这段代码：

$(document).on('keyup change', '[data-calc]', function() {
	var a = $('[data-calc=a]') ,
  		aV = a.val() ,
      b = $('[data-calc=b]') ,
      bV = b.val() ,
      c = $('[data-calc=c]') ,
      cV = c.val();
  if(aV.length != 0 && bV.length != 0) {
  	cV = parseInt(aV) + parseInt(bV);
  	c.val(cV).prop('disabled',true);
  }
  else if(aV.length != 0 && cV.length != 0) {
  	bV = parseInt(cV) - parseInt(aV);
  	b.val(bV).prop('disabled',true);
  }
  else if(bV.length != 0 && cV.length != 0) {
  	aV = parseInt(cV) - parseInt(bV);
  	a.val(aV).prop('disabled',true);
  }
  else {
  	$('[data-calc]').prop('disabled',false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" data-calc="a" /><br />
+<br />
<input type="text" data-calc="b" /><br />
=<br />
<input type="text" data-calc="c" />

现在，当我填写第一和第二个字段时，工作正常。

但如果我填写第一个，那么第三个字段将被禁用。

有什么想法吗？

Answer 1

应该如何，你应该检查哪个元素被编辑

$(document).on('keyup change', '[data-calc]', function(event) {
  var $this = $(event.target || event.srcElement),
    calc = $this.data('calc'),
    $newCalc,
    $a,
    $b,
    $c,
    aV,
    bV,
    cV;
  if (!calc) {
    return;
  }

  $a = $('input[data-calc=a]');
  $b = $('input[data-calc=b]');
  $c = $('input[data-calc=c]');

  $('input[data-calc]').prop('disabled', false);

  aV = Number($a.val());
  bV = Number($b.val());
  cV = Number($c.val());

  if (calc === 'a') {
    if (!!aV && !!bV) {
      $newCalc = $c.val(aV + bV);
    } else if (!!aV && !!cV) {
      $newCalc = $b.val(cV - aV);
    }
  } else if (calc === 'b') {
    if (!!aV && !!bV) {
      $newCalc = $c.val(aV + bV);
    } else if (!!bV && !!cV) {
      $newCalc = $a.val(cV - bV);
    }
  } else if (calc === 'c') {
    if (!!aV && !!cV) {
      $newCalc = $b.val(cV - aV);
    } else if (!!bV && !!cV) {
      $newCalc = $a.val(cV - bV);
    }
  }
  if ($newCalc) { $newCalc.prop('disabled', true); }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" data-calc="a" />
<br />+
<br />
<input type="text" data-calc="b" />
<br />=
<br />
<input type="text" data-calc="c" />

Answer 2

问题在于你对keyup＆amp; change个事件。从代码中删除change，然后您将设置为： - ）

当您在第3个字段中键入值时，首先触发keyup事件，一切都很顺利，当焦点移出第3个字段时，它会触发change事件 - 其中自第1＆amp;第二个字段都有值。

＆＃13;

$(document).on('blur', '[data-calc]', function() {
	var a = $('[data-calc=a]') ,
  		aV = a.val() ,
      b = $('[data-calc=b]') ,
      bV = b.val() ,
      c = $('[data-calc=c]') ,
      cV = c.val();
  if(aV.length != 0 && bV.length != 0) {
  	cV = parseInt(aV) + parseInt(bV);
  	c.val(cV).prop('disabled',true);
  }
  else if(aV.length != 0 && cV.length != 0) {
  	bV = parseInt(cV) - parseInt(aV);
  	b.val(bV).prop('disabled',true);
  }
  else if(bV.length != 0 && cV.length != 0) {
  	aV = parseInt(cV) - parseInt(bV);
  	a.val(aV).prop('disabled',true);
  }
  else {
  	$('[data-calc]').prop('disabled',false);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" data-calc="a" /><br />
+<br />
<input type="text" data-calc="b" /><br />
=<br />
<input type="text" data-calc="c" />

＆＃13;

输入两个输入，填写第三个

2 个答案: