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

你应该以某种方式存储以前的值。这里只是一个需要开发的想法。此外，如果设计师是理解人，我可能会使用＆＃34;％＆＃34;作为用于此类目的的标签（它更简单，更稳定）

＆＃13;

$('#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 + '%');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input" type="text" />

＆＃13;

使用jQuery输入掩码获得比率？

1 个答案: