Question

jquery mask ios

Forms Web Customizations

Updated March 14, 2017

asked on March 10, 2017 • Show version history

I'm setting up a form that has an input mask for the Phone Number field. The mask works on Windows OS and Android, however does not work on iOS. Is there a trick to get the mask to work on iOS?

$(document).ready(function () {  
  $.getScript('http://localhost/Forms/js/jquery.mask.min.js', function () {
    $(".phone input").mask("(999) 999-9999");
  });

0 0

Answer

SELECTED ANSWER

replied on March 14, 2017

I ended up fixing this issue by calling the mask function once the phone number field is in focus. I've also added the script used to set the field type to 'tel', as well as the input length to 14, which matches the length of the mask:

$(document).ready(function () {  
  $.getScript('http://localhost/Forms/js/jquery.mask.min.js', function () {
  });  
  $('.phone input').attr('type', 'tel').on('focus', phoneMask);
  $('.phone input').attr('maxlength', '14');  
  function phoneMask() {
    $('.phone input').mask('(999) 999-9999');
});

0 0

Replies

replied on March 10, 2017

Nathan,

I am not having the problem on my side and the only difference is that I have my field set to type of tel (see below). Note: this also defaults the field to bring up the Number keyboard as well.

      $('.phone input').attr('type', 'tel');

-Nate

0 0

replied on March 10, 2017

Thanks Nate. I have that piece added also, to ensure the number keyboard is displayed. It's very odd, other jquery scripts that are a part of the Form are working in iOS; only the phone number mask isn't working, and it's only on iOS

0 0

You are not allowed to follow up in this post.

Question

Question

jquery mask ios

Answer

Replies

Sign in to reply to this post.