使用jQuery输入掩码的比率？

Question

我正在使用this jquery输入掩码插件来尝试创建一个输入字段，用户可以输入一个比率合计达到100％。例如。 10%/90%

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

有什么建议吗？

Answer 1

您应该以某种方式存储以前的值。这里只是一个需要开发的想法。此外，如果设计师是理解的人，我可能会使用以“％”两个输入端为这种目的的标签（它的玉米粥更简单，更稳定）

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