輸入兩個輸入，填充第三個

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和change事件上。 從您的代碼中刪除change ，然后就可以開始了:-)

當您在第三個字段中鍵入一個值時，首先觸發keyup事件，一切都很好，當焦點移出第三個字段時，它觸發了change事件-由於第一個字段和第二個字段都有價值觀。

 $(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); } }); 

 <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" />