Question

Use number field input type with Field Mask

Forms

Updated December 7, 2015

asked on December 4, 2015

I am looking for a solution similar to THIS post to use with a mobile device. The idea is to have the form pull up the number pad on a mobile device, allowing the user to enter their phone number, then mask the input in the following format (###) ### - ####

To get the number pad to appear, the NUMBER input type is what needs to be used, but if I use that, the javascript to mask the input does not work. This applies to other fields (credit card, ssn, etc.)

Any help is much appreciated.

Thanks,

Nate

0 0

Answer

SELECTED ANSWER

replied on December 4, 2015

This post seems to outline the problem. The workaround is to change the type from "number" to "tel" and that seems to work. Some code to do just that:

$(document).ready(function() {
    $(document).find('input[type=number]').attr('type', 'tel');
});

2 0

Replies

replied on December 4, 2015 • Show version history

This is in Safari:

1 0

replied on December 4, 2015

Awesome! Thanks Chris - I'll give this a try. Can you confirm this brings up the number pad when using the field type 'tel' on a mobile device?

0 0

replied on December 4, 2015 • Show version history

Looks like my previous code is a bit flawed according to this post. I did test it on iOS in Chrome and Safari and it does work as intended. It does bring up the number pad with the mask applied. I did a test in IE11 and this does work in there as well. It may not be backward compatible with older versions, and if you run into problems, use the code from the post.

0 0

replied on December 7, 2015

This worked great, Thanks Chris!

0 0

You are not allowed to follow up in this post.

Question

Question

Use number field input type with Field Mask

Answer

Replies

Sign in to reply to this post.