Question

我有一个电话屏蔽9999-9999。但是，如果用户输入其他数字，我希望它是99999-9999。它正在工作，但是输入发生在倒数第二个地方，而不是最后一个地方。这是一个示例：

输入：123456789

预期结果：12345-6789

实际结果：12345-6798

我尝试了.focus（），但是它仅在调试时有效。我认为这与自代码停止以来有时间执行它有关，但我不确定。

$(document).ready(function () {
  $('#TelContato').unmask();
  $('#TelContato').prop('placeholder', '9999-9999');
  $('#TelContato').mask('0000-0000');

  mask2 = false;
  var masks = ['0000-0000', '00000-0000'];
  $("#TelContato").keypress(function(e){
    var value = $('#TelContato').val().replace(/-/g, '').replace(/_/g, '');
    //changes mask
    if (value.length == 8 && mask2 == false) {
      $('#TelContato').unmask(masks[0]);
      $('#TelContato').mask(masks[1]);
      mask2 = true;
    }
  })
  //this is a keyup method because detects backspace/delete
  $("#TelContato").keyup(function (e) {
    var value = $('#TelContato').val().replace(/-/g,'').replace(/_/g, '');
    //changes mask back
    if (value.length <= 8 && mask2 == true) {
      $('#TelContato').unmask(masks[1]);
      $('#TelContato').mask(masks[0]);
      mask2 = false;
    }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.js"></script>

<input asp-for="TelContato" class="form-control" maxlength="9" id="TelContato" />

Answer 1

看来您的问题是您要在遮罩之前取消遮罩。您无需取消屏蔽，只需更新屏蔽（重新配置）即可。

$(document).ready(function() {
  const masks = ['0000-0000', '00000-0000'];
  const maskedElem = $('#TelContato');

  maskedElem.prop('placeholder', '9999-9999');
  maskedElem.mask(masks[0]);

  maskedElem.on('propertychange input', function(e) {
    var value = maskedElem.cleanVal();

    //changes mask
    maskedElem.mask(value.length >= 8 ? masks[1] : masks[0]);
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.js"></script>

<input asp-for="TelContato" class="form-control" maxlength="9" id="TelContato" />

Answer 2

这是我使用遮罩属性找到的解决方案

$(document).ready(function () {
  $('#TelContato').unmask();
  $('#TelContato').prop('placeholder', '9999-9999');
  $('#TelContato').mask('0000-0000');
  var SPMaskBehavior = function (val) {
      return val.replace(/\D/g, '').length === 9 ? '00000-0000' : '0000-00009';
  },
  spOptions = {
      onKeyPress: function (val, e, field, options) {
          field.mask(SPMaskBehavior.apply({}, arguments), options);
      }
  };
  $('#TelContato').mask(SPMaskBehavior, spOptions);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.js"></script>

<input asp-for="TelContato" class="form-control" maxlength="9" id="TelContato" />

更改蒙版后将光标放在错误的位置

2 个答案: