比率にjQuery入力マスクを使用しますか？

Question

this jquery input mask pluginを使用して入力フィールドを作成します。入力フィールドには、最大100％の比率を入力できます。例えば。 10%/90%

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

ユーザがタイプ20場合入力の両方の部分がそう100まで追加する必要があり、右に、数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); 
}); 

ご提案がありますか？

Answer 1

何らかの形で以前の値を保存する必要があります。ここで開発する必要のあるアイデアだけです。また、設計者が理解した人であれば、私はおそらく（それのドロドロ簡単でより安定した）そのような目的のためのラベルとして「％」との2つの入力を使用することになり

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

素晴らしい作品