3

Olá!

Estou tentando alterar uma máscara de um campo do meu formulário. Abaixo no campo realçado em azul, é como está atualmente, e no segundo campo é como desejo que fique (sem o espaço entre o ) e o 1). Desejo alterar isso pois ao permitir que os dados sejam enviados da primeira forma, tenho alguns problemas ao retornar resultados do banco.

Máscara

Abaixo o código Javascript que está fazendo a máscara.

Já tentei remover o espaço depois do ) na linha texto = [texto.slice(0, 3), ") " mas tive problemas com o funcionamento do campo.

$("#txtTelefone2").bind('input propertychange', function () {

            var texto = $(this).val();

            texto = texto.replace(/[^\d]/g, '');

            if (texto.length > 0) {
                texto = "(" + texto;

                if (texto.length > 3) {
                    texto = [texto.slice(0, 3), ") ", texto.slice(3)].join('');
                }
                if (texto.length > 12) {
                    if (texto.length > 13)
                        texto = [texto.slice(0, 10), "-", texto.slice(10)].join('');
                    else
                        texto = [texto.slice(0, 9), "-", texto.slice(9)].join('');
                }
                if (texto.length > 15)
                    texto = texto.substr(0, 15);
            }
            $(this).val(texto);
        })

Como posso solucionar isto? Obrigado!

2 Respostas 2

7

Aqui fica uma sugestão:

$("#txtTelefone2").bind('input propertychange', function (e) {

    var numeros = this.value.replace(/[\s()-]*/g, '').split('');
    if (numeros.length > 12) {
        this.value = this.value.slice(0,-1);
        return false;
    }
    var posicaoHifen = numeros.length == 12 ? 8 : 7;
    var formatado = '';
    for (var i = 0; i < numeros.length; i++) {
        if (i == 0) formatado += '(';
        if (i == 2) formatado += ')';
        if (i == posicaoHifen) formatado += '-';
        formatado += numeros[i];
    }
    this.value = formatado;
});

Demo: http://jsfiddle.net/HP2Wx/1/

Explicação:

    this.value.replace(/[\s()-]*/g, '').split('');

Criar uma array só com os numeros. Limpando os espaços e os parentesis.

    if (numeros.length > 11) {
        this.value = this.value.slice(0,-1);
        return false;
    }

No caso do comprimento máximo ter sido atingido, retirar o ultimo valor e parar a função

    var posicaoHifen = numeros.length == 12 ? 8 : 7;

Verificar o comprimento total no numero e mudar a posição do hifen

    var formatado = '';
    for (var i = 0; i < numeros.length; i++) {
        if (i == 0) formatado += '(';
        if (i == 2) formatado += ')';
        if (i == 7) formatado += '-';
        formatado += numeros[i];
    }

Acrescentar os caracteres desejados ao input, conforme a posição do numero durante a iteração da array de numeros

7
  • 1
    Sergio, obrigado pela resposta, de fato funciona para o problema proposto, porém o deslocamento do hífen não está funcionando como estava originalmente. +1 pela boa explicação. 21/07/2014 às 15:32
  • @VictorAlencarSantos, hmmm a deslocação do hifen não estava pedido na pergunta. Pode explicar que casos diferentes quer para a posição do hifen e para que comprimento? Assim posso ao menos deixar a resposta acertada.
    – Sergio
    21/07/2014 às 16:29
  • Olá @Sergio. Originalmente, o hífen estava posicionado assim: (xx) xxxx-xxxx caso fossem numeros de 8 dígitos, e assim (xx) xxxxx-xxxx caso fossem números de 9. 21/07/2014 às 17:02
  • @VictorAlencarSantos, obrigado. Melhorei a resposta para se mais alguém precisar.
    – Sergio
    21/07/2014 às 17:27
  • 1
    Perfeito, @Sergio! 22/07/2014 às 13:38
4

Ficaria assim:

$("#txtTelefone2").bind('input propertychange', function () {

        var texto = $(this).val();

        texto = texto.replace(/[^\d]/g, '');

        if (texto.length > 0) {
            texto = "(" + texto;

            if (texto.length > 3) {
                texto = [texto.slice(0, 3), ")", texto.slice(3)].join('');
            }
            if (texto.length == 12) {
                texto = [texto.slice(0, 8), "-", texto.slice(8)].join('');                    
            }
            else if (texto.length > 12)
                    texto = [texto.slice(0, 9), "-", texto.slice(9)].join('');

            if (texto.length > 14)
                texto = texto.substr(0, 14);
        }
        $(this).val(texto);
    })

Demo: http://fiddle.jshell.net/5z29v/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .