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

Question

我有一個三個輸入的表單。我希望能夠填寫兩個字段並自動填寫第三個字段。

所以，它應該像這樣工作：
- 我填寫的第一，第二，第三被計算
- 我填寫的第一個和最後一個，第二個被計算
- 我填寫第二和最後一個，第一個被計算

我想出了這個代碼：

$(document).on('keyup change', '[data-calc]', function() { 
 
\t var a = $('[data-calc=a]') , 
 
    \t \t aV = a.val() , 
 
     b = $('[data-calc=b]') , 
 
     bV = b.val() , 
 
     c = $('[data-calc=c]') , 
 
     cV = c.val(); 
 
    if(aV.length != 0 && bV.length != 0) { 
 
    \t cV = parseInt(aV) + parseInt(bV); 
 
    \t c.val(cV).prop('disabled',true); 
 
    } 
 
    else if(aV.length != 0 && cV.length != 0) { 
 
    \t bV = parseInt(cV) - parseInt(aV); 
 
    \t b.val(bV).prop('disabled',true); 
 
    } 
 
    else if(bV.length != 0 && cV.length != 0) { 
 
    \t aV = parseInt(cV) - parseInt(bV); 
 
    \t a.val(aV).prop('disabled',true); 
 
    } 
 
    else { 
 
    \t $('[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

問題出在你對雙方都綁定到keyup & change事件。從你的代碼中刪除change，你就開始了:-)

當你在第三個字段中鍵入一個值時，首先觸發keyup事件，並且一切都很好，當焦點移出第三個字段它激發了change事件 - 由於第一個&第二個字段都具有值，所以它又將其禁用。

$(document).on('blur', '[data-calc]', function() { 
 
\t var a = $('[data-calc=a]') , 
 
    \t \t aV = a.val() , 
 
     b = $('[data-calc=b]') , 
 
     bV = b.val() , 
 
     c = $('[data-calc=c]') , 
 
     cV = c.val(); 
 
    if(aV.length != 0 && bV.length != 0) { 
 
    \t cV = parseInt(aV) + parseInt(bV); 
 
    \t c.val(cV).prop('disabled',true); 
 
    } 
 
    else if(aV.length != 0 && cV.length != 0) { 
 
    \t bV = parseInt(cV) - parseInt(aV); 
 
    \t b.val(bV).prop('disabled',true); 
 
    } 
 
    else if(bV.length != 0 && cV.length != 0) { 
 
    \t aV = parseInt(cV) - parseInt(bV); 
 
    \t a.val(aV).prop('disabled',true); 
 
    } 
 
    else { 
 
    \t $('[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 2

這是應該的，你應該檢查哪些元素被編輯

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