I am using a masked plugin for two fields. One is for a Canadian Postal Code (T5T 5T5)and the other is for a phone number (999-999-9989). Both masks work ok on desktop. The problem is seen if you open the same code on a mobile phone. As the user types in the Postal Code one, the cursor keeps jumping to the beginning of the cursor.

Here is the code:

HTML:

<input type="text" id="someID" /> (T9T 1A1)
<br />
<span id="result"></span>
<br /><br />
<input type="text" id="someOtherID" /> (999-999-9999)
<br />
<span id="result1"></span>

Javascript:

$("#someID").mask("a9a 9a9");
$("#someID").on('keyup', function() {
  var actualValue = $(this).val().replace(/[_-\s]/g, '').length;
  if (actualValue === 0 || actualValue !== 6) {
    $("#result").text("not valid")
  } else {
    $("#result").text("valid")
  }
});

$("#someOtherID").mask("999-999-9999");
$("#someOtherID").on('keyup', function() {
  var actualValue = $(this).val().replace(/[_-\s]/g, '').length;
  if (actualValue === 0 || actualValue !== 10) {
    $("#result1").text("not valid")
  } else {
    $("#result1").text("valid")
  }
});

I have attached the Mask plugin on this fiddle.

Anyone ever seen this?

I am using a masked plugin for two fields. One is for a Canadian Postal Code (T5T 5T5)and the other is for a phone number (999-999-9989). Both masks work ok on desktop. The problem is seen if you open the same code on a mobile phone. As the user types in the Postal Code one, the cursor keeps jumping to the beginning of the cursor.

Here is the code:

HTML:

<input type="text" id="someID" /> (T9T 1A1)
<br />
<span id="result"></span>
<br /><br />
<input type="text" id="someOtherID" /> (999-999-9999)
<br />
<span id="result1"></span>

Javascript:

$("#someID").mask("a9a 9a9");
$("#someID").on('keyup', function() {
  var actualValue = $(this).val().replace(/[_-\s]/g, '').length;
  if (actualValue === 0 || actualValue !== 6) {
    $("#result").text("not valid")
  } else {
    $("#result").text("valid")
  }
});

$("#someOtherID").mask("999-999-9999");
$("#someOtherID").on('keyup', function() {
  var actualValue = $(this).val().replace(/[_-\s]/g, '').length;
  if (actualValue === 0 || actualValue !== 10) {
    $("#result1").text("not valid")
  } else {
    $("#result1").text("valid")
  }
});

I have attached the Mask plugin on this fiddle.

Anyone ever seen this?

• javascript
• jquery
• html
• maskedinput

• Does the demo work on your phone? digitalbush./projects/masked-input-plugin – jrummell Commented Jan 13, 2016 at 18:51
• Yes it does work on my phone but product key on the website does the same jumping. – mpora Commented Jan 13, 2016 at 19:15
• Looks okay on my mobile device. What device / OS / browser are you using when experiencing the issues? – iMoses Commented Jan 19, 2016 at 21:46
• Samsung Galaxy Note 5 – mpora Commented Jan 19, 2016 at 21:48
• Do you mean it keeps jumping to the end of the text box? It happens to me too but the cursor goes back to the correct position after a split millisecond and doesn't affect my typing. I tried it on android 4.4.4 with Chrome and Firefox. – Dave Chen Commented Jan 19, 2016 at 21:50

2 Answers 2

It's a longshot, but try setting the autoComplete="off" attribute on your input fields. It might be a bug related to Chrome for mobile.

Try this.

My hunch is based on this issue that, although reported on a pletely different scenario, I believe refers to the same bug.

Quoting:

Indeed the issue is caused by the auto-correction.

When a word is marked for a suggestion, the selectionStart and selectionEnd are not reflecting the caret position but they wrap the whole word, even though the caret is somewhere in between and the actual selection is collapsed.

My assumption is that the cursor must be manipulated in order to create the masking visual effects, so that may very well be connected.

probably because you are writing the keyup listener the wrong way

this post has the answer: Jquery keyup not working on Android

UPDATE

well... the mask plugin itself may be the root of this problem... a quick look at the source code reveals:

            el.on('input.mask keyup.mask', p.behaviour)
            .on('paste.mask drop.mask', function() {
                setTimeout(function() {
                    el.keydown().keyup();
                }, 100);
            })

so i guess that you may try to eliminate a suspicios code for mobile devices until you reach the desireable effect