Javascript – Máscara para nono dígito de celular

Boa noite,

Recentemente enfrentei um problema interessante no trabalho. Foi necessário programar uma máscara com o nono dígito opcional para celulares de São Paulo que contivessem o dígito “9”.

Por exemplos, o campo deveria aceitar (e exibir com uma formatação agradável visualmente) os seguintes valores:

8391-7788

98391-7788

Foi necessário um pouco de javascript para atender a necessidade, deixo abaixo o código (usando JQuery e JQuery Masked Input) que usamos para resolver o problema:

		<script>

			//acrescenta à classe string um método necessário para facilitar
			String.prototype.splice = function( idx, rem, s ) {
				return (this.slice(0,idx) + s + this.slice(idx + Math.abs(rem)));
			};

			$(function(){

				//máscara inicial com o nono digito opcional
				$("#txtCel").mask('9999-9999?9');

				//ao sair do campo, vamos atualizar a máscara
				$("#txtCel").focusout(function(){

					//pegando apenas os digitos
					var cel = $("#txtCel").val().replace('-','').replace(/_/g,'');

					//se tiver 8 digitos
					if(cel.length == 8)
					{
						//vamos colocar o '-' no meio
						cel = cel.splice(4, 0, '-');
						//seta a máscara para aceitar o nono digito
						$("#txtCel").mask('9999-9999?9');
					}
					//caso contrário
					else if(cel.length == 9)
					{
						//deixamos 5 digitos na esquerda
						cel = cel.splice(5,0, '-');
						//seta a máscara para aceitar um digito a menos (caso tenha digitado errado)
						$("#txtCel").mask('99999-999?9');
					}

					//põem o valor no campo
					$(this).val(cel);

				});

			});
		</script>

Fecha a régua e passa a conta! (ou algo assim)

Anúncios

4 pensamentos sobre “Javascript – Máscara para nono dígito de celular

  1. A seguir. Somente números + DDD + tel 8 “OU” 9 dígitos + tratamento para “ç e Ç”

    By: †‡Falcão‡†

    js: Assinatura(NomeCampo)

    function telefone(a) { $(a).keyup(function (f) { if ((f.keyCode > 64 && f.keyCode < 91) || f.keyCode == 186) { var d = (String.fromCharCode(f.keyCode)).toUpperCase(); var c = (a.value.charAt(a.value.length – 1)).toUpperCase(); if (d == c || c == "Ç" || c == "ç") { a.value = a.value.substring(0, (a.value.length – 1)) } } }); separador = "("; separador1 = ")"; separador2 = "-"; conjunto1 = 0; conjunto2 = 3; conjunto3 = 8; if (a.value.length 13) { a.value = a.value.replace(“-“, “”); a.value = a.value.substring(0, 9) + separador2 + a.value.substr(9, 4) } } } };

  2. Bacana!! eu adaptei ela e funcionou legal
    porém estou com um problema.

    quando coloco um celular com 8 dígitos ele aplica a mascar corretamente, porem se eu apagar o campo para digitar novamente… ela não deixa eu colocar um celular com 9 dígitos

    para digitar um celular com 9 dígitos eu tenho que recarregar a pagina

    alguém pode me ajudar ????

    //acrescenta à classe string um método necessário para facilitar
    String.prototype.splice = function( idx, rem, s ) {
    return (this.slice(0,idx) + s + this.slice(idx + Math.abs(rem)));
    };

    $(function(){

    //máscara inicial com o nono digito opcional

    $(“#TEL01”).mask(‘(99) 99999-9999’);

    //ao sair do campo, vamos atualizar a máscara
    $(“#TEL01”).focusout(function(){

    //pegando apenas os digitos
    var cel = $(“#TEL01″).val().replace(‘-‘,”).replace(/_/g,”);

    cel = cel.replace(‘(‘,”).replace(‘)’,”).replace(‘ ‘,”);

    //se tiver 8 digitos
    if(cel.length == 10)
    {
    //vamos colocar o ‘-‘ no meio
    cel = cel.splice(2, 0, ‘ ‘).splice(7, 0, ‘-‘);
    //seta a máscara para aceitar o nono digito
    $(“#TEL01”).mask(‘(99) 9999-9999’);
    }
    //caso contrário
    else if(cel.length == 11)
    {
    //deixamos 5 digitos na esquerda
    cel = cel.splice(2, 0, ‘ ‘).splice(8, 0, ‘-‘);
    //seta a máscara para aceitar um digito a menos (caso tenha digitado errado)
    $(“#TEL01”).mask(‘(99) 99999-9999’);
    }

    //põem o valor no campo
    $(this).val(cel);

    });

    });

  3. obrigado pela ajuda cara, adaptei ela da minha maneira.

    var tel = novoValor.replace(‘-‘,”).replace(/_/g,”);

    if(tel.length == 13)
    {
    tel = tel.splice(9, 0, ‘-‘);
    $(element).mask(‘(99) 9999-9999?9’);
    } else if(tel.length == 14) {
    tel = tel.splice(10,0, ‘-‘);
    $(element).mask(‘(99) 99999-999?9’);
    } else {
    // caso o cara não digitar o formato da máscara..apaga tudo..
    tel = “”;
    }

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

w

Conectando a %s