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?
Some frequent uses of input masks include entry of telephone numbers, ZIP or postal codes, times and dates. e.g. When entering into a text box a phone number on a data capture form, in the format "(111) 111 1111" the area code brackets, the space between the number and the area code will automatically be placed in.
An input mask is a string of characters that indicates the format of valid input values. You can use input masks in table fields, query fields, and controls on forms and reports. The input mask is stored as an object property. You use an input mask when it's important that the format of the input values is consistent.
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
andselectionEnd
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With