在输入中更改焦点颜色

Question

假设我有一个验证用户名的代码

 oValidationManager.sUsername = document.getElementById('username');

 validateUsername: function () {
                oValidationManager.sUsername.addEventListener('focus', function(event){
                    oValidationManager.sUsername.style.borderColor = '#FF0000';
                    oValidationManager.sUsername.style.boxShadow = 'inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6)';
                });
                oValidationManager.sUsername.addEventListener('blur', function(){
                    oValidationManager.sUsername.style.borderColor = '';
                    oValidationManager.sUsername.style.boxShadow = '';
                });
                if (oValidationManager.sUsername.value === '') {
                    oValidationManager.sShowUsernameError.innerHTML = oValidationManager.aErrorMsg.username.required;
                }  else {

                    oValidationManager.sUsername.addEventListener('focus', function(event){
                        oValidationManager.sUsername.style.borderColor = '#00FF00';
                        oValidationManager.sUsername.style.boxShadow = 'inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 255, 0, 0.6)';
                    });
                    oValidationManager.sShowUsernameError.innerHTML = '';
                    return true;
                }
                return false;
            },

我想发生的是即使该字段有效，即使用户正在键入也要更改焦点颜色。 使用上面的代码，我可以得到结果，但是我需要单击某个地方以查看更新的焦点颜色，该颜色在键入时没有被更新。

Answer 1

尝试在没有事件侦听器的情况下执行此操作。 与其直接更改css属性，不如尝试添加和删除类。 进行错误检查，如果有，请在输入中添加.invalid类的类。 然后为该类设置不同的样式。

CSS：

.input-field{
   border: 2px solid transparent;
}

.input-field:focus{
   border-color: blue;
}

.input-field.invalid:focus{
   border-color: red;
}

HTML：

<input type="text" class="input-field"/>

JS：

let myInput = document.querySelector(".input-field");

if(/*Something is wrong*/){
   myInput.classlist.add("invalid");
}else{
   myInput.classlist.remove("invalid");
}

Answer 2

 input:invalid { background-color: red; } 

 <input type="email">