masked input not working in android mobiles?

Question

I am using the digitalbush masked input jQuery plugin. It is working fine in web browsers and the iPhone browser perfectly, but it is not working for Android mobile devices.

My issue : mask is in input field _ - _ - ___.

When I type numbers it will 12345685555___--

Example: http://rossbender.com/temp/mask.html

Any suggestions? How can I solve this?

Thanks Prasad.

Piacular

can you share the DOM you have used ? – Atelectasis

$('input[name="user[ssn]"]').mask("999-99-9999"); but all masks are returns same behaviour. – Piacular

i mean the html you have used? – Atelectasis

Ruby on rails (html view page) – Piacular

please share the html code? – Atelectasis

<input type="tel" id="socialsecurity" name="user[ssn]" /> The demo site also not working in android mobiles digitalbush.com/projects/masked-input-plugin – Piacular

Have you used maxlength attribute? – Atelectasis

no, because ssn field is fixed length. – Piacular

This was fixed awhile ago (11 months ago) but for some reason the distribution posted on the website never took the changes. If you grab from the raw source, the fix works: raw.github.com/digitalBush/jquery.maskedinput/master/src/… – Acerbic

@JonathanRowny Can you make an answer from your comment? Because in fact, it solves the problem. – Bendigo

@DurgaPrasad My answer appears to be working for most people. Do you mind marking it the accepted answer? – Were

Answer 1

I resolved this issue with three actions, which have fixed this for all Android 4.0+ phones:

1. Update masked-input to at least version 1.4
2. Add type="tel" to the input, to trigger the numeric keyboard
3. Remove the input's maxlength attribute or set it to a value certain not to interfere with the caret action, like 20.

Were

Worked for me on android 4.x – Butyraceous

worked for me on 5.1.1, using input mask on angular form using angular-payments. Thanks! – Anabaptist

This worked for me. Samsung keyboard has an issue because of predictive text, which was resolved by forcing numeric keyboard. – Graybeard

Worked for me on android 6.0.1, Note 7 – Kieserite

@Max - did you already have a recent version of masked-input, and was the maxlength value set? – Were

This didn't work for my application, noticed Masked Input wasn't being maintained anymore so I found a new library: igorescobar.github.io/jQuery-Mask-Plugin Similar basic call and works like a charm! – Trenatrenail

Solved by adding type="tel"... thanks!!! – Backfill

Obrigado amigo, me salvou! Funcionou perfeitamente!! – Resnatron

Answer 2

I tried using the raw script that Jonathan Rowny mentioned, but I was still having the same problem on an S3 - Chrome browser. I think it has something to do with inputs type="tel" and/or type="number". I ended up having to use another plugin. http://igorescobar.github.io/jQuery-Mask-Plugin/

jquery-mask (not to be confused with jquery-masked-input) is very similar but the syntax was slightly different. Hope this helps anyone else with this issue.

jquery-masked-input syntax: $("#phone").mask("[phone]");

VS

jquery-mask syntax: ('#phone').mask('[phone]');

Daiseydaisi

The raw script Jonathan Rowny mentioned doesn't work for me either on Android 4.1 + Chrome. I tried Igor Escobar's script (jquery-mask) that's mentioned above and it worked perfectly! – Handsel

Igor Escobar's script doesn't work on older Android stock browsers though – Butyraceous

Answer 3

This was fixed awhile ago but for some reason the distribution posted on the website never took the changes. If you grab from the raw source, the fix works: https://raw.githubusercontent.com/digitalBush/jquery.maskedinput/master/src/jquery.maskedinput.js

Acerbic

i have used above .Js file. still problem is not solved. i am using Android jelly bean Os and Chtome/Firefox browser – Unexampled

@Unexampled maybe it's because of the cache of your browser. Anyway, today it works and it's 1.4.1 version that you can get here github.com/digitalBush/jquery.maskedinput/tree/master/dist – Terence

Answer 4

After trying different mask libraries (Inputmask, ui-mask, ngMask) I ended up using jQuery-Mask-Plugin https://igorescobar.github.io/jQuery-Mask-Plugin/ which works pretty well and is also lightweight and well documented and has angularjs, react ,... samples.

Rozanneroze

Answer 5

To further enhance the accepted answer of Tony Brasunas, add following snippet in jquery.maskedinput.js for point number 3 to dynamically increase maxlength so it doesn't interfere with caret action.

Remove the input's maxlength attribute or set it to a value certain not to interfere with the caret action, like 20.

    defs = $.mask.definitions;
    tests = [];
    partialPosition = len = mask.length;
    firstNonMaskPos = null;

    //insert snippet below
    if (chrome && android) {
        console.log("chrome && android");
        var allAllowedRegExps = '';
        jQuery.each(defs, function (key, value) {
            allAllowedRegExps = allAllowedRegExps + key;
        });
        allAllowedRegExps = allAllowedRegExps.replace(/\[/g, '');
        allAllowedRegExps = allAllowedRegExps.replace(/\]/g, '');
        allAllowedRegExps = '[^' + allAllowedRegExps + ']';
        var re = new RegExp(allAllowedRegExps, "g");
        var actual = mask;
        var replacedVal = actual.replace(re, "");
        var actualValue = actual.length - replacedVal.length;
        if ($(this).attr('maxlength') !== undefined) {
            $(this).attr('maxlength', parseInt(this.attr('maxlength')) + parseInt(actualValue));
        }
   }

    mask = String(mask);

Rhianna

Answer 6

I just ran into this problem and resolved it by removing the attribute type="number" from the asp textbox. After that masked input worked even on mobile devices.

Godoy

Answer 7

The library used in the question is no longer being maintained. I switched my application to jQuery Mask Input as it works great, has a very similar base init call to the former library making for an extremely easy transition and, at the time of this post, jQuery Mask Input is regularly maintained at GitHub.

My issue was with the phone number masker moving the cursor back to the second position when 3 or 4 digits were entered. The cursor continued to act odd after that point. The problem was noticed using jQuery Masked Input v1.4.1 (old library) in android tablets using Chrome post major version 51.

Trenatrenail

Answer 8

This can be a quick fix:

var ua = navigator.userAgent;
var isAndroid = /Android/i.test(ua);
var isChrome = /Chrome/i.test(ua);

// Fix masking on Chrome for mobile devices
if (isAndroid && isChrome) {
    $('.price_input').attr('type','tel');
}     

Canossa

Answer 9

It worked for me by using 1.4.1 and setting the max length to one plus the number of chars in the mask. The mask limited the actual input and the max length +1 fixed the problem of not being able to type numbers in the field.

Anadromous