How to add the ninth digit in a fixed way using jQuery Mask ?
$('#telefone').mask('(00) 90000-0000');
This way I use is only optional.
How to add the ninth digit, in a fixed way, using the jQuery Mask?
12
asked by anonymous 19.06.2015 / 22:26
4 answers
8
Solutions:
You can manually add 9 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 the 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 enter 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><scriptsrc="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>
19.06.2015 / 22:43
5
From what I saw in the documentation you do not have to force it with the plugin options 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 he waits for the user to type the '9' digit but if it does not fallback automatically inserts '9'.
example: link
24.06.2015 / 16:36
3
Are you sure you do not want to leave the field unmasked, process the input in change with .replace(/[^0-9]/g, '') and then reformat the number if necessary? We are in 2015, programming for 64-bit processors with gigabytes of memory; is it not reasonable that (61) 3411-1221 , (0xx61) 3411 1221 or 06134111221 are all valid forms of entry for the same phone number?
If you absolutely insist on locking the phone number entry, 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 tinker with the left side of the regular expression as the migration to the 9th digit is advanced; this will complain about invalid phones using the HTML5 Validation API.
23.06.2015 / 22:59
0
Dude has an example of a good, another similar question from here in the stack:
Exactly with this example, do not set the Ninth digit more force the user to type, then you can validate the quantities of characters, I do not 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>
24.06.2015 / 22:11