蒙版更改后光标在错误的位置答案

【问题标题】：cursor in the wrong place after mask changes蒙版更改后光标在错误的位置
【发布时间】：2020-10-13 17:38:37
【问题描述】：

我有一个电话面具 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" />

【问题讨论】：

标签： javascript jquery jquery-mask

【解决方案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" />

【讨论】：

哇！太感谢了！我认为在再次屏蔽之前先取消屏蔽是个好习惯，从没想过这是问题所在。

【解决方案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" />

【讨论】：