Изменение цвета входного текста неправильно с addEventListener

1

Из входного элемента Id 'email', я выполняю операцию addEventListener для динамической проверки электронной почты. Цвет текста будет "черным", если он действителен, или "maroon", если нет.

<!-- 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.

Ex. '[email protected]' - допустимая строка электронной почты, но цвет меняется только при следующей операции события (которая является '[email protected]' или '[email protected]').

  • 6
    используйте вместо этого keyup
  • 0
    вы хотите проверить после того, как запись сделана ??? когда потерял фокус
Показать ещё 3 комментария
Теги:

2 ответа

0
Лучший ответ

Используйте keyup вместо keydown.

Зачем?

Потому что, когда вы используете keydown, событие запускается, и ваша функция запускается до того, как новый символ будет вставлен в поле <input>. Таким образом, функция получает старое значение и проверяет правильность.

Когда вы используете 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">
Поделиться
0

Событие keydown срабатывает при нажатии клавиши, но до того, как значение было обновлено. Это может быть превосходным, поскольку оно позволяет отменить изменение значения, которое обычно запускается при нажатии клавиши, если это "плохой" ключ, но это не помогает решить вашу проблему.

Используйте событие input вместо события keypress. Это будет срабатывать после изменения значения, даже если оно было изменено с помощью мыши, чтобы вставить новое значение в поле.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню