masked input working ok on desktop and working ok for some masks on mobile

Question

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?

Does the demo work on your phone? http://digitalbush.com/projects/masked-input-plugin — jrummell, Jan 13 '16 at 18:51
Yes it does work on my phone but product key on the website does the same jumping. — mpora, Jan 13 '16 at 19:15
Looks okay on my mobile device. What device / OS / browser are you using when experiencing the issues? — iMoses, Jan 19 '16 at 21:46
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, Jan 19 '16 at 21:50
It jumps to the beginning of the input. So say I type T the cursor will jump to the beginning of the T — mpora, Jan 19 '16 at 21:51

iMoses · Accepted Answer · 2016-01-19T22:00:19.800

6

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 completely 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.

edited Jan 19 '16 at 22:00

answered Jan 19 '16 at 21:54

iMoses

4,338
1
24
39

I am back with the same issue. The fix you had given me fixed my issue but now its failing again. – mpora Apr 11 '16 at 21:17
Only on Chrome again? – iMoses Apr 12 '16 at 14:33
Yes, only in chrome. – mpora Apr 12 '16 at 15:44

score 0 · Answer 2 · edited May 23 '17 at 12:32

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

Tried this but it is not working. The cursor still jumps to the beginning. — mpora, Jan 19 '16 at 21:50

masked input working ok on desktop and working ok for some masks on mobile

2 Answers2

UPDATE