How to add the ninth digit, fixed, using jQuery Mask?

Asked

Viewed 2,688 times

13

How to add the ninth digit, in a fixed form, using the jQuery Mask?

$('#telefone').mask('(00) 90000-0000');

This way I use is only optional.

javascript jquery input mask jquery-mask-plugin

  • What do you mean "ninth digit"? You mean having the 9 obligatorily?

  • The digit 9 should already contain in the mask, for example: (88) 98888-8888. I edited the question to clarify it.

  • Which one are you using? -> https://plugins.jquery.com/tag/mask/

  • This: http://igorescobar.github.io/jQuery-Mask-Plugin/

  • 2

    I have a cell phone from Juiz de Fora (which is still 8 digits). How do I register on your site?

  • http://codigofonte.uol.com.br/codigos/mascara-para-telefones-de-8-e-9-digitos-jquery

  • only in case no answer or plugin already mentioned here serve, try this one which does not depend on jQuery https://github.com/BankFacil/vanilla-masker

  • @ctgPi I had already worried about this, but the service will only be local and there is no need to treat other numbers.

  • So if the guy has a Judge Out cell phone and goes to town, then he can’t use the site either? (OK, at this point in the championship maybe Judge Out already has the 9)...

  • @Bacco the requirement really was bizarre.

  • @Marcelodeandrade I exaggerated just to try the limits of the idea :)

Show 6 more comments

4 answers

8


Solutions:

You can add the 9 manually when the user is typing the phone:

$('#telefone').mask('(00) 00000-0000').on('keyup', function(event){
   event.preventDefault();
   var v = this.value;
   console.log(v.length);
   if (v.length == 3) this.value = v+') 9';
});

You can do a validation on blur (when leaving the field), to add the ninth digit:

$(document).on('blur', '#telefone', function(event){
    var vl = this.value;
    if (vl.length == 14){
      vl = vl.slice(0,5)+'9'+vl.slice(5);
    }
    this.value = vl;
});

You can also force the user to type 9:

$('#telefone').mask('(00) Z0000-0000', {
   translation: {
     // A regra diz que o carácter Z digitado tem que ser 9 e não é opcional
     'Z': {
       pattern: /[9]/, optional: false 
     }
   }
});

Examples:

$('.automatico').mask('(00) 00000-0000').on('keyup', function(event){
   event.preventDefault();
   var v = this.value;
   console.log(v.length);
   if (v.length == 3) this.value = v+') 9';
});


$('.blur').mask('(00) 00000-0000').on('blur', function(event){
    var vl = this.value;
    if (vl.length == 14){
      vl = vl.replace('-', '');
      vl = vl.slice(0,5)+'9'+vl.slice(5, 9)+'-'+vl.slice(9);
    }
    this.value = vl;
});


$('.obrigar').mask('(00) Z0000-0000', {
   translation: {
     // A regra diz que o carácter Z digitado tem que ser 9 e não é opcional
     'Z': {
       pattern: /[9]/, optional: false 
     }
   }
}).on('blur', function(event){
    if (this.value.length < 15){
      alert('Telefone inválido');
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>

Adicionar "automaticamente": 
<input type="text" class="automatico"><br>

No blur: 
<input type="text" class="blur"><br>

Obrigar a digitar: 
<input type="text" class="obrigar"><br>

  • I need digit 9 (nine) to be fixed on the mask.

  • Endendi after he had submitted the reply. I already corrected.

  • Thanks, @kaduAmaral. I saw it this way, but I need digit 9 to be there in the mask already.

  • No @Marcelodeandrade, if I understand correctly, I believe that what you want is not the most "correct" to do, because it will be disturbing the user to enter the information, but da para usando o evento keyup, almost in the same way as blur.

  • His "automatic" solution was what he really needed, in another way, but functional.

5

From what I saw in the documentation it is not possible to force with the options of the plugin but you can use a placeholder to indicate the format and use a fallback to force the entry of the number 9:

$('#telefone').mask("(00) K0000-0000", {
    placeholder: "(__) 9____-____",
    translation: {
        'K': {
            pattern: /9/,
            fallback: '9'
        }
    }
});

So it expects the user to type '9' but if not fallback inserts '9' automatically.

example: http://jsfiddle.net/sbh1jrx8/2/

3

Are you sure you don’t want to leave the field without mask, process the input in the change with .replace(/[^0-9]/g, '') and then reformat the number if necessary? It’s 2015, programming for 64-bit processors with gigabytes of memory; it’s unreasonable that (61) 3411-1221, (0xx61) 3411 1221 or 06134111221 are all valid forms of input to the same phone number?

If you absolutely insist on locking the phone number input, you can put something like

<input type="text" pattern="(?:\(?0?(?:xx)?[1289][1-9]\)?\s*\d|\(?0?(?:xx)?[34567][1-9]\)?\s*)\d{4}[ -]?\d{4}">

in your form - of course, you will need to touch the left side of the regular expression as the migration to the 9th digit progresses; this will complain about invalid phones using the HTML5 validation API.

0

Dude has an example of good, another similar question from here in the stack:

How to create input masks with Javascript?

Exactly with this example, do not fix the Ninth digit more force the user to type, then you can validate the amounts of characters, I don’t know srsrsrs. 

<html>
<head>
    <title>Mascara Telefone</title>
<script type="text/javascript">
/* 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 );
    }
}
</script>

</head>
<body>

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

</body>
</html>

Browser other questions tagged javascript jquery input mask jquery-mask-plugin

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