Regular Expressions with Javascript (CPF MASK)

Asked

Viewed 88 times

-2

I’m trying to create a Cpf javascript mask but my code is not applied to the input, but when I give a console.log() the code is being applied to the console.

My input:

<input id="cpf" onblur="codigo.colocaMascara()" type="text" class="form-control" required />

Javascript code:

    class Codigo {
         colocaMascara() {
    
            let cpf = document.querySelector('#cpf');
    
            cpf.addEventListener('input', (text) => {
    
                let resultado = text.target.value;
                
                return resultado
                    .replace(/\D/g, '')
                    .replace(/(\d{3})(\d)/, '$1.$2')
                    .replace(/(\d{3})(\d)/, '$1.$2')
                    .replace(/(\d{3})(\d{1,2})/, '$1-$2')
                    .replace(/(\-d{2})\d+?$/, '$1')
                
            });
            
     
        }
    }
<input id="cpf" onblur="codigo.colocaMascara()" type="text" class="form-control" required />

javascript

  • Take a look at this question: https://answall.com/questions/218989/formatr-sequentiallynum%C3%A9rica-in-format-Cpf-with-separators-using-javascript

  • <input id="Cpf" onkeyup="codigo.colocaMask()" type="text" class="form-control" required />

  • Does this Answer your Question? Format numerical sequence in CPF format with tabs using javascript

  • I already took a look at those, but I was wondering what’s wrong with my code. It’s just not showing in the input.

  • You are Return the result and not assigning the input value

  • 1

    codigo is not defined; you set the class Codigo, but at no time did you urge her to create the object codigo used in the <input>.

  • 1

    Complementing what @Woss commented... If your class only has this, it doesn’t need it, it would be simpler to just have the object (creating with const codigo = { colocaMascara: () => { /* ... */}}). If you want to keep the class would be interesting the variable cpf is thus accessible by all methods and the querySelector will not be called all the time, can still receive this reference to the HTML element in the constructor, doing a control inversion and decoupling your code

  • yeah, I set up the class yes, I just forgot to put it here. But thank you all.

Show 3 more comments

1 answer

0


Your code has some running problems, the most serious is not assigning the value to the field, only a Return will not change the value, so I put cpf.value = resultado, the second is related to events, only works if you give a click in and another outside the field, hence it activates the blur. The way you invoke the class is also wrong, to instantiate it is necessary to use the new and of () for construction.

I did it that way:

class Codigo {
     colocaMascara() {

        let cpf = document.querySelector('#cpf');

        cpf.addEventListener('input', (text) => {

            let resultado = text.target.value;

            cpf.value = resultado
                .replace(/\D/g, '')
                .replace(/(\d{3})(\d)/, '$1.$2')
                .replace(/(\d{3})(\d)/, '$1.$2')
                .replace(/(\d{3})(\d{1,2})/, '$1-$2')
                .replace(/(\-d{2})\d+?$/, '$1')
        });
    }
}

new Codigo().colocaMascara()
    <input id="cpf" type="text" class="form-control" required />

You can also remove the class, leaving only one function:

let cpf = document.querySelector('#cpf');
function colocaMascara(event) {
    let resultado = event.target.value;

    cpf.value = resultado
        .replace(/\D/g, '')
        .replace(/(\d{3})(\d)/, '$1.$2')
        .replace(/(\d{3})(\d)/, '$1.$2')
        .replace(/(\d{3})(\d{1,2})/, '$1-$2')
        .replace(/(\-d{2})\d+?$/, '$1')
}
<input id="cpf" type="text" oninput="colocaMascara(event)" class="form-control" required />

Note: I put the variable assignment cpf out of function based on @Costamilam’s comment, so it is only called once

  • About transforming into a function, is that I am in a larger scope in the project, I have more methods in the class (type to validate Cpf) so I created the class to do all the manipulations of Cpf or other data. Thanks for your reply, it worked here. Only my last regular expression that is not regulating the input size, but I must have missed something.

  • I thought the result variable was already taking input value, but apparently the text passed as parameter is not my input value? After I place text.target.value

  • And as for the event you used in the button: oninput, it’s still put onkeyup or onkeypress, right?

  • This, has the same value value, but I do not know if it works to assign on itself, I believe not, also works if you use these 2 other events

  • From what you’re saying, it seems to be the case mark an answer as accepted. Here we do not write "solved" in the question. If you have an answer that really helped you, mark it as accepted. If you came to the solution on your own, put in the solution as an answer. So content is more organized and easier to find in the future by other people with similar problems.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.