使用JavaScript更改输入字段焦点的颜色

Question

我正在实现一个HTML输入字段，用户必须在其中输入他的电子邮件地址。 我也在使用JavaScript在同一输入字段上实现验证。

 function validateEmail() { var email = document.getElementById('EmailTextbox'); var errorMessage = document.getElementById('ErrorMessageJumbotron'); var filter = /^([a-zA-Z0-9_\\.\\-])+\\@(([a-zA-Z0-9\\-])+\\.)+([a-zA-Z0-9]{2,4})+$/; if (!filter.test(email.value)) { errorMessage.style.display = 'block'; email.style.color = '#E54A49'; email.style.border = "1px solid #E54A49"; } else { errorMessage.style.display = 'none'; email.style.border = "1px solid #949494"; email.style.color = 'black'; } } 

 * { font-family: 'Poppins', sans-serif; } #EmailTextbox { margin-bottom: 15px; } input[type="text"] { font-size: 1em; height: 45px; width: 100%; border: 1px solid #949494; } 

 <div class="container"> <div class="jumbotron" id="ErrorMessageJumbotron" style="display: none;"> <div id="errorMessage"> <i class="fa fa-exclamation-triangle fa-2x" aria-hidden="true"> &nbsp; &nbsp; <span style="font-family: 'Poppins', sans-serif; font-weight: 500;">Please correct the marked fields.</span> </i> </div> </div> </div> <!--container--> <div class="container jumbotron"> <input type="text" onblur="validateEmail()" id="EmailTextbox" placeholder="E-mail address" class="form-control"> </div> 

如果电子邮件不正确，则将输入字段的边框设置为红色，并提示用户输入有效的电子邮件地址。 但是，当用户单击输入字段时，焦点被染成蓝色，在这种情况下，我希望它显示为红色。 否则，我希望它是默认的蓝色。

我尝试了几种方法来尝试使用JavaScript更改焦点颜色，但是我没有设法使其正常工作。

Answer 1

这是您正在尝试做的简化版本，以帮助您实现最终目标：

的HTML

<input onblur="onEmailInputBlur(event)" placeholder="E-mail address">

的CSS

input.is-invalid {
  border: 1px solid red;
  outline: none;
}

JS

var invalidClass = 'is-invalid';

function onEmailInputBlur(event) {
    var email = event.target.value,
        elClassList = event.target.classList;

  elClassList.remove(invalidClass);

  if (!isEmailValid(email)) {
    elClassList.add(invalidClass);
  }
}

function isEmailValid(email) {
  var validEmailRegex = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return validEmailRegex.test(email);
}

---

一个JsFiddle示例：
https://jsfiddle.net/ybaagysn/2/