使用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/