CODEWITHSUNDEEP
javascriptjqueryhtmlmaskedinput
mpora
mpora

Reputation: 1479

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

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?

Upvotes: 5

Views: 3837

Answers (2)

iMoses
iMoses

Reputation: 4348

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.

Upvotes: 6

ymz
ymz

Reputation: 6916

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

Upvotes: 0

Related Questions