Mask for HTML5 Input fields

Asked

Viewed 46,606 times

2

I am applying a mask addition feature in my code, even when the user fills the phone or mobile, to chew be filled automatically. However, my page does not return anything while user type.

<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>
html jquery jquery-masked-input

  • which library he used?

  • I didn’t really adhere to any library, which is best for running this code?

3 answers

6


jquery.mask.min plugin

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="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 fixed the way you want to act 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>
<script src="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 default must always be set via a regular expression.

In the next line is presented the call in jQuery of the .mask. The pattern used allows the typing of only numbers, and the 0 are mandatory typing and the 9 is optional.

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

Source

2

It’s not returning anything because you don’t care about any library. You can use this one:

$(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>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>

1

Hello, I don’t know how it could work the way you’re using it. But I’ve used this lib and when I needed to use it I took the following approach:

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

Additionally you no longer need your ajax code with jquery, just load lib into your html header.

I don’t know if it’s the same lib I used, follow the link reference: https://igorescobar.github.io/jQuery-Mask-Plugin/

this mode of use is in the documentation: https://igorescobar.github.io/jQuery-Mask-Plugin/docs.html

Browser other questions tagged html jquery jquery-masked-input

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