How to create input masks with Javascript?

Asked

Viewed 39,327 times

10

I need to create a mask for a Javascript-only phone input (I can’t use jQuery). How can I do it?

javascript

  • You can use jQuery?

  • 3

    Unfortunately not

  • 3

    I know that many do not agree (in particular the "bosses" with their requirements)... but I particularly prefer to let the user do as they please - these masks are a pain in the ass for the user. I prefer to validate and then format the already validated value.

7 answers

5

Here an example, works with 8 and 9 digits:

Script:

/* Máscaras ER */
    function mascara(o,f){
        v_obj=o
        v_fun=f
        setTimeout("execmascara()",1)
    }
    function execmascara(){
        v_obj.value=v_fun(v_obj.value)
    }
    function mtel(v){
        v=v.replace(/D/g,"");             //Remove tudo o que não é dígito
        v=v.replace(/^(d{2})(d)/g,"($1) $2"); //Coloca parênteses em volta dos dois primeiros dígitos
        v=v.replace(/(d)(d{4})$/,"$1-$2");    //Coloca hífen entre o quarto e o quinto dígitos
        return v;
    }
    function id( el ){
        return document.getElementById( el );
    }
    window.onload = function(){
        id('telefone').onkeypress = function(){
            mascara( this, mtel );
        }
    }

HTML:

<input type="text" name="telefone" id="telefone" maxlength="15" />

DEMO

Source: http://codigofonte.uol.com.br/codigos/mascara-de-telefone-de-9-digitos-com-ddd-em-javascript

3

Using this regex

^(\(11\) [9][0-9]{4}-[0-9]{4})|(\(1[2-9]\) [5-9][0-9]{3}-[0-9]{4})|(\([2-9][1-9]\) [5-9][0-9]{3}-[0-9]{4})$

This regex accepts two phone formats

Format of telephone accepted: (99) 99999-9999 (this is compatible with the format currently used in São Paulo)

Another accepted format: (99) 9999-9999 (this is compatible with all other formats of the country)

  • 1

    But how do I input? Shows the whole JS.

2

For those who can use jQuery, there is the maskbrphone, it serves to mask phones with eight and nine digits using or not the DDD. The syntax is very simple, example:

$('#telefone').maskbrphone()

2

Uses regular expression!

function mascararTel(v){
    v=v.replace(/\D/g,"");            
    v=v.replace(/^(\d{2})(\d)/g,"($1) $2"); 
    v=v.replace(/(\d)(\d{4})$/,"$1-$2");   
    return v;
}

0

<html>
<script>
function mask(e, id, mask){
    var tecla=(window.event)?event.keyCode:e.which;   
    if((tecla>47 && tecla<58)){
        mascara(id, mask);
        return true;
    } 
    else{
        if (tecla==8 || tecla==0){
            mascara(id, mask);
            return true;
        } 
        else  return false;
    }
}
function mascara(id, mask){
    var i = id.value.length;
    var carac = mask.substring(i, i+1);
    var prox_char = mask.substring(i+1, i+2);
    if(i == 0 && carac != '#'){
        insereCaracter(id, carac);
        if(prox_char != '#')insereCaracter(id, prox_char);
    }
    else if(carac != '#'){
        insereCaracter(id, carac);
        if(prox_char != '#')insereCaracter(id, prox_char);
    }
    function insereCaracter(id, char){
        id.value += char;
    }
}
<script>

<!--CODIGO HTML-->
<input onkeypress="return mask(event, this, '(##) ####-####')" maxlength="14" placeholder=" (DDD) 0000-0000">

</html>

0

As follows:

var value = "11912345678"
var formatted = value.replace(/^(\d{2})(\d{5})(\d{4}).*/,"($1) $2-$3");
alert(formatted);

-3

  • Buddy, I don’t think you understand the question.

  • The problem was to be thinking about placeholders and to have completely forgotten about masking in the case of formatting the x’D values

Browser other questions tagged javascript

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