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