Change phone mask

Question

Hello!

I’m trying to alter a mask from a field of my form. Below in the field highlighted in blue, is as it is currently, and in the second field is as wish it remains (without the space between the ) and the 1). I wish to change this because by allowing the data to be sent in the first way, I have some problems when returning results from the database.

Below the Javascript code that is making the mask.

I tried to remove the space after ) on the line texto = [texto.slice(0, 3), ") " but I had problems with the operation of the field.

$("#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);
        })

How can I fix this? Thank you!

Answer 1

Here is a suggestion:

$("#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/

Explanation:

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

Create an array only with numbers. Clearing spaces and parentheses.

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

In case the maximum length has been reached, remove the last value and stop the function

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

Check the total length in number and change the hyphen position

    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];
    }

Add the desired characters to the input, depending on the position of the number during the iteration of the number array

Answer 2

Would look like this:

$("#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/