How to mask an HTML5 input?

Asked

Viewed 94,464 times

9

For example... I want one input unique to phone numbers. By typing the DDD it automatically receives the parentheses: (xx). When typing the rest of the numbers it divides with a hyphen, for example: (xx)abcd-efgh. And in the cases of states that received the ninth digit, (xx)9abcd-efgh.

How can I do that?

html5 input

  • From what I understand you want to mask what the user types is this?

  • More or less, like... When he clicks on the input already appears the parentheses to put the ddd for example, has a default type for this?

  • @Everton In case you’re wanting to mask one input. I made an edit on your question by changing the title. You can reverse it if there are no improvements.

3 answers

16

You can mask a field using:

Jquery Mask Plugin
Documentation

Example of use:

$(document).ready(function(){
    $('#telefone').mask('(00) 0000-0000');
});

Or in html itself:

<input type="text" name="telefone" data-mask="(00) 0000-0000" data-mask-selectonfocus="true" />

You can also apply callback on order... there are several examples in the documentation that fit your need..

For cases where the state has the ninth digit, you can use the On-the-fly change: Example taken from the documentation, needs only adaptation to their needs:

var options =  {onKeyPress: function(cep, e, field, options){
  var masks = ['00000-000', '0-00-00-00'];
    mask = (cep.length>7) ? masks[1] : masks[0];
  $('.crazy_cep').mask(mask, options);
}};

$('.crazy_cep').mask('00000-000', options);

Or the solution @Wallace provided in the comments that would look like this:

$(document).ready(function(){
    $('#telefone').mask('(00) 0000-0000#');
});

Or the following expression:

$(document).ready(function(){
    $('#telefone').mask('(00) 0000-00009');
});

Where 0 would be mandatory and 9 optional;

@Wallace also cited validation using HTML5.

  • For cases where there is such a "ninth digit", I believe you can use the expression (00) 0000-0000#

  • Or also the On-the-fly mask update, there is an example of the documentation provided; I will edit the answer to provide the solution as well;

6

What you are wanting can be done easily with jQuery Mask.

Its use is exactly as @Rafaelwithoeft described in his reply.

$(document).ready(function(){
    $('[name=telefone]').mask('(00) 0000-0000');
});

As for doing this only with HTML5, what you’ll be able to do at most is use the attribute pattern. However, this attribute will not be used for self-packing, but only for validation of the field according to the desired format.

For example, in the case of a phone validation:

<input type="text" pattern="\(\d{2}\)\d{4}-\d{4}" />
#exige que o campo seja preenchido com "(99)9999-9999"

2

For those who want a solution that does not use Jquery:

const tel = document.getElementById('tel') // Seletor do campo de telefone

tel.addEventListener('keypress', (e) => mascaraTelefone(e.target.value)) // Dispara quando digitado no campo
tel.addEventListener('change', (e) => mascaraTelefone(e.target.value)) // Dispara quando autocompletado o campo

const mascaraTelefone = (valor) => {
    valor = valor.replace(/\D/g, "")
    valor = valor.replace(/^(\d{2})(\d)/g, "($1) $2")
    valor = valor.replace(/(\d)(\d{4})$/, "$1-$2")
    tel.value = valor // Insere o(s) valor(es) no campo
}
<input type="tel" class="form-control" id="tel" name="tel" maxlength="15" pattern="\(\d{2}\)\s*\d{5}-\d{4}" required>

Browser other questions tagged html5 input

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