对比率使用 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() 语句。如果正在编辑右值，我只想更改左值，反之亦然。没有这个，我的代码将只替换比率的 both 边。

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

对比率使用 jQuery 输入掩码？

Use jQuery input mask for a ratios?

jquery

html

css

jquery-inputmask