Replicate phone mask in various fields

Asked

Viewed 157 times

0

I have a form where the user who is filling can include multiple mobile numbers, but my mask function works only in the first field.

var telMask = ['(99) 9999-99999', '(99) 99999-9999'];
var tel_1 = document.querySelector('#celular');
VMasker(tel_1).maskPattern(telMask[0]);
tel_1.addEventListener('input', inputHandler.bind(undefined, telMask, 14), false);
javascript html jquery

  • The problem is that only tel_1 is receiving the "mask control". All phone fields need the addEventListener

  • But how can I put that all fields need {addeventlistener} if I don’t know how many fields will have

  • Then you need to do this via dynamically; when creating a new field adds the event to it

  • You have no other method than addeventlistener to apply to fields?

  • It turns out you’re creating the fields and not adding the mask to them, you understand!?

  • Which libraries are being used? I have one that can meet your need.

Show 1 more comment

1 answer

2


Try to put the mask after the code loads, via "Class" of the HTML. Follow example below:

<head>
     
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     
    <title>Criando máscaras com jquery</title>
     
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
     
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
     
    </head>
    <script type="text/javascript">
     
      $(document).ready(function(){ 
        $("input.fone").mask("(99) 9999-99999");
      });
     
    </script>
    
    <body>
     
      <h1>Usando máscaras com jquery</h1>
     
      <label for="fone">Fone:</label><br>
     
      <input type="text" class="fone" id="fone" name="fone" /><br><br>
    
    </body>
     
    </html>

  • using the jquery Mask I was able to do, but had to put the identifier in the class, using the id did not work. Thanks

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.