Mask for Input HTML5 fields

Navigation
2

I'm applying a masking addition feature on my code, even when the user fills in the phone or mobile, the chewing will be populated automatically. However, my page does not return anything as the user types. 

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Tag das dimensões do bootstrap -->

<!-- Bootstrap CSS -->
<link rel="icon" href="imagens/icon/favicon.png">

<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="estilo.css" rel="stylesheet">

<script type="text/javascript">
    $(document).ready(function(){
      $('#telefone').mask('(00) 0000-0000');
      });
</script>
</head>
<body>

<div class="cadusuario">
  <div class="row">
    <div class="col-md-4">
      <form action="cadastrarusuario.php" method="POST">
        <label>E-mail/Login</label>
        <input type="text" class="form-control" placeholder="Digite seu e-mail.." id="login" name="login"><br>
        <label>Nova Senha</label>
        <input type="password" class="form-control" placeholder="Digite sua nova senha.." id="senha" name="senha"><br>
        <label>Repita a Senha</label>
        <input type="password" class="form-control" placeholder="Digite sua nova senha.." id="senha2" name="senha2"><br>
        <label>Telefone</label>
        <input type="text" class="form-control" placeholder="Telefone" id="telefone" name="telefone" ><br>
        <label>Celular</label>
        <input type="text" class="form-control" placeholder="Celular" id="celular" name="celular" ><br>
        <button type="submit" class="btn btn-default btn-roxo">Cadastre-se</button>
      </form>
    </div>
  </div>
</div>
</body>
    
asked by anonymous 28.01.2018 / 22:58

3 answers

2

Plugin jquery.mask.min 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js"></script>

 <label>Telefone</label>
 <input type="text" class="form-control" placeholder="Telefone" id="telefone" name="telefone" ><br>
 <label>Celular</label>
 <input type="text" class="form-control" placeholder="Celular" id="celular" name="celular" ><br>
        
    <script type="text/javascript">
    $("#telefone, #celular").mask("(00) 0000-0000");
    </script>

If you want to configure the mobile phone separately from whatever you want by acting in the script below 

 <script type="text/javascript">
    $("#telefone").mask("(00) 0000-0000");
    $("#celular").mask("(00) 0000-0000");
 </script>

Mask for 8- and 9-digit phones - jQuery 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js"></script>


<label for="txttelefone">Telefone</label>
<input type="tel" name="telefone" id="telefone" pattern="\([0-9]{2}\)[\s][0-9]{4}-[0-9]{4,5}" />
<script type="text/javascript">$("#telefone").mask("(00) 0000-00009");</script>
  

The pattern attribute of the input tag is responsible for validating what is being typed, and the pattern must always be defined through a regular expression.

     

The following line displays the .mask jQuery call. The standard used allows you to enter only numbers, with 0 being typed and 9 being optional.

     

This way the mask pattern can be used for both DDD and 8-digit fixed phones as well as DDD and 8- or 9-digit mobile phones.

Fonte

    
28.01.2018 / 23:39
1

Hello, I do not know how it could work the way you are using it. But I already used this lib and when I needed to use I did the following approach: 

 <input type="text" data-mask="(00) 00000-0000" class="form-control" placeholder="Telefone" id="telefone" name="telefone">

In addition, you no longer need your ajax code with jquery, just load the lib in the header of your html.

I do not know if it's the same lib I used, follow the reference link: link

this mode of use is in the documentation: link

    
28.01.2018 / 23:33
1

You are not returning anything because you are not importing any library. You can use this here: 

$(document).ready(function(){
     $('.telefone').mask("(99) 99999-9999");
});
<input type="text" class="telefone" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="//cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
    
28.01.2018 / 23:45
How to pass a different value in an HTML form? How to access a pointer inside a pointer structure