CODEWITHSUNDEEP
javascriptjqueryjquery-mask
Vitor Ceolin
Vitor Ceolin

Reputation: 216

cursor in the wrong place after mask changes

I have a phone mask 9999-9999. But, I want it to be 99999-9999 if the user inputs another number. It is working, but the input happens in the penultimate place instead of the last one. Here is an example:

input: 123456789

expected result: 12345-6789

actual result: 12345-6798

I tried .focus() but it only works when debugging. I think it is something related to it having time to execute since the code is stopped, but i'm not sure.

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

Upvotes: 1

Views: 272

Answers (2)

Vitor Ceolin
Vitor Ceolin

Reputation: 216

Here's the solution i found using the mask properties

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

Upvotes: 1

Dipen Shah
Dipen Shah

Reputation: 26085

It seems your problem is that you are unmasking, right before masking. You do not need to unmask, just updating mask (reconfiguring) should work.

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

Upvotes: 2

Related Questions