CODEWITHSUNDEEP
javascriptjqueryjquery-plugins
Eugene Chefranov
Eugene Chefranov

Reputation: 171

How to resolve problem with jquery mask plugin?

I use this plugin for mask https://igorescobar.github.io/jQuery-Mask-Plugin/

And I need to start mask like this +38 (0XX) XXX-XX-XX

I have problem with zero (which mandatory), now instead zero I can put any digits

My code:

 $('input[type="tel"]').mask("+38 (000) 000-00-00", {
    placeholder: "+38 (0XX) XXX-XX-XX",
    clearIfNotMatch: true
  });

How will be correct?

Upvotes: 0

Views: 819

Answers (1)

gaetanoM
gaetanoM

Reputation: 42054

I thought about this solution. But in this case need to fill zero manually, I need to fill automatically like +38 in my case.

According to your comment, it's enough to combine translation and

Fallback digits: when a user types a invalid char for the current position the plugin will replace it by its fallback instead of erasing them.

Hence, it's enough to add to your mask the following line:

translation: {X: {pattern: /0/, optional: false, fallback: '0'}}

...and, your code now is:

$('input[type="tel"]').mask("+38 (X00) 000-00-00", {
     placeholder: "+38 (0XX) XXX-XX-XX",
     clearIfNotMatch: true,
     translation: {X: {pattern: /0/, optional: false, fallback: '0'}}
 });


$('input[type="tel"]').mask("+38 (X00) 000-00-00", {
    placeholder: "+38 (0XX) XXX-XX-XX",
    clearIfNotMatch: true,
    translation: {X: {pattern: /0/, optional: false, fallback: '0'}}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>


<input type="tel">

Upvotes: 1

Related Questions