Question

从输入元素Id'mail'，我正在执行动态电子邮件验证的addEventListener操作。如果有效或'栗色'，如果不是，则文字颜色为'黑色'。< / p>

<!-- 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' event验证文本。

实施例。 'smith@email.co'是有效的电子邮件字符串，但颜色仅在下一个事件操作（'smith@email.com'或'smith@email.c'）上更改。

Answer 1

使用keyup代替keydown。

<强>为什么吗

因为当您使用keydown时，会触发事件，并且在将新字符插入<input>字段之前运行您的函数。这样函数就会得到旧值并且验证不正确。

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

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">

Answer 2

按下键时会触发keydown事件，但在更新值之前会触发此事件。这可能是非常好的，因为它可以让你取消按键通常会触发的值的变化，如果它是一个“坏”键，但它无助于解决你的问题。

使用the input event代替keypress事件。即使通过使用鼠标将新值粘贴到字段中来更改值，也会在值更改后触发。

addEventListener输入文本颜色更改不正确

2 个答案: