0

我正在使用这个jquery 输入掩码插件来尝试创建一个输入字段，用户可以在其中输入一个加起来为 100% 的比率。例如10% / 90%

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

输入的两部分加起来必须为 100。因此，如果用户键入20，那么在右侧，数字应该是80eg 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);
});

有什么建议吗？

4

1 回答 1

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

于 2017-03-05T03:56:40.583 回答