javascript - 输入输入时更改焦点颜色

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");
}