Change phone mask

Question

Change phone mask

Navigation

#1 by (6 votes)
#2 by (4 votes)

3

Hello

I'm trying to change a mask from a field on my form. Below in the field highlighted in blue, it is as it currently is, and in the second field it is how I want it to be (without the space between ) and 1 ). I want to change this because by allowing the data to be sent in the first way, I have some problems returning bank results.

BelowistheJavascriptcodethatisdoingthemask.

Ihavetriedtoremovethespaceafter)onlinetexto=[texto.slice(0,3),") " but I had problems with the field operation.

$("#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? Thanks!

javascript jquery

asked by anonymous 21.07.2014 / 15:43

2 answers

6

Here's 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: link

Explanation:

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

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

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

If 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 the number and change the position of the hyphen

    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 array of numbers

21.07.2014 / 16:32

Loop is not repeating as it should Connecting to the database with App.config

score 4 · Accepted Answer

It 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: link