javascript - 使用 addEventListener 输入文本颜色更改不正确

Question

通过输入元素 ID“email”，我正在执行 addEventListener 操作以进行动态电子邮件验证。如果有效，文本颜色将为'黑色'；如果无效，文本颜色将为'栗色'。

<!-- HTML -->    
<input type="text" id="email" name="email">

//Javascript
document.getElementById('email').addEventListener('keydown', function(e) {
            var value = this.value;
            ValidateEmail(value);

            function ValidateEmail(mail)   {
                if (/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(mail))
                {
                    console.log("ok");
                    var red = document.getElementById('email');
                    red.style.color = 'black';
                    return (true);
                } else {
                    console.log("You have entered an invalid email address!");
                    var red = document.getElementById('email');
                    red.style.color = '#9e1e1e';
                    return (false);
                }
            }
        });

上述程序可以运行，但有一个问题，即。该函数仅在下一个 'keydown' 事件 时验证文本。

例如。 'smith@email.co' 是有效的电子邮件字符串，但颜色仅在下一个事件操作时更改(即 'smith@email.com' 或 'smith@email.c')。

Answer 1

使用keyup而不是keydown .

为什么？

因为当你使用keydown时，在将新字符插入 <input> 之前，会触发该事件并运行您的函数。 field 。从而使函数获取旧值并验证错误。

当您使用keyup时，在新字符插入 <input> 后，该事件被触发并运行您的函数。字段，以便您的函数正确获取值并正确验证它。

document.getElementById('email').addEventListener('keyup', function(e) {
            var value = this.value;
            ValidateEmail(value);

            function ValidateEmail(mail)   {
                if (/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(mail))
                {
                    console.log("ok");
                    var red = document.getElementById('email');
                    red.style.color = 'black';
                    return (true);
                } else {
                    console.log("You have entered an invalid email address!");
                    var red = document.getElementById('email');
                    red.style.color = '#9e1e1e';
                    return (false);
                }
            }
        });

<input type="text" id="email" name="email">