当我长按键盘上的一个键时，事件输入错误页面

Question

the problem i have is in a input event, when i write my email, i have a function with input event who check if the e-mail is valid or no. So when is not valid, i use a innerHTML for show a message invalid email. The problème is when i long press a key on my keyboard, my else is every time executed and my page slow down and bug? How can i resolve this problem please: This is my JS code :

let newsletter_email = document.getElementById('newsletter_email');

newsletter_email.addEventListener('input', function(e) {
    let info_newsletter = document.getElementById('info_newsletter');

    if(confirmEmail(newsletter_email.value)){
        info_newsletter.innerHTML = "<h6 style='color: rgb(1, 196, 1);'>E-Mail valide !</h6>";
        let interval_valid_email = setTimeout(function() {
            info_newsletter.innerHTML = "";
        }, 2000);
    }else {
        info_newsletter.innerHTML = "<h6 style='color:red;'>E-Mail non valide !</h6>";
        e.preventDefault();
    }
});

Thank u for help !

Answer 1

I advice you to use blur event

Example:

newsletter_email.addEventListener('blur', (e) => {
    // Logic to check the email
});

So in this case, you check the email when the focus is lost. It's not usefull check the email when the user press a single character.