使用jQuery輸入掩碼的比率？

我正在使用this jquery輸入掩碼插件來嘗試創建一個輸入字段，用戶可以輸入一個比率合計達到100％。例如。 10%/90%使用jQuery輸入掩碼的比率？

<input type="text" class="form-control" id="input" data-inputmask="'mask': '99/99', placeholder="50/50">

輸入的兩個部分必須加起來爲100。因此，如果用戶類型20，然後在右側，該數量應該80例如20/80。如果80號碼更改爲40，則左側的號碼20應自動更改爲60。它不應該讓你輸入超過100的數字。

這是我迄今的嘗試，但它沒有按預期工作。我不確定如何創建一個if()聲明來判斷用戶是在編輯左側還是右側。我只想要左值改變，如果正在編輯正確的值，反之亦然。沒有這個，我的代碼只會取代這兩個比例的兩邊。

$('#input').keyup(function(){ 
    var user_ratio = $(this).val().split('/'); 
    var left = 100 - parseInt(user_ratio[1]); //65 
    var right = 100 - parseInt(user_ratio[0]); //35 
    var $(this).val(left+'/'+right); 
});

有什麼建議嗎？

來源

2017-03-05 ProEvilz

您應該以某種方式存儲以前的值。這裏只是一個需要開發的想法。此外，如果設計師是理解的人，我可能會使用以「％」兩個輸入端爲這種目的的標籤（它的玉米粥更簡單，更穩定）

$('#input').val('99%/99%') // for demo 
 

 
function arrayFromValue(val) { 
 
    return val.split('/').map(function(str) {return isNaN(parseInt(str)) ? 0 : parseInt(str)}); 
 
} 
 

 
var $input = $('#input'), 
 
    currentValue = arrayFromValue($input.val()); 
 

 
$input.on('keyup', function() { 
 
    var ratio = arrayFromValue($(this).val()); 
 
    
 
    // if the same value return 
 
    if(currentValue[0] === ratio[0] && currentValue[1] === ratio[1]) return; 
 
    
 
    // if more than 100 return with previous value 
 
    if(ratio[0] > 100 || ratio[1] > 100) { 
 
     return $(this).val(currentValue[0] + '%/' + currentValue[1] + '%'); 
 
    } 
 
    
 
    var left = currentValue[1] !== ratio[1] ? 100 - ratio[1] : ratio[0]; 
 
    var right = currentValue[0] !== ratio[0] ? 100 - ratio[0] : ratio[1]; 
 

 
    currentValue = [left, right]; 
 
    $(this).val(left + '%/' + right + '%'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="input" type="text" />

來源

2017-03-05 03:56:40 disstruct

偉大的作品，謝謝。我希望使用一個輸入的原因是爲了減少我的形式，因爲有許多輸入需要比率輸入。 – ProEvilz

使用jQuery輸入掩碼的比率？

回答

相關問題