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

【问题标题】：Changing the colour of the input field focus using JavaScript使用 JavaScript 更改输入字段焦点的颜色
【发布时间】：2017-10-05 21:18:54
【问题描述】：

我正在实现一个 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 更改焦点颜色，但我没有设法让它正常工作。

【问题讨论】：

您看到的蓝色不是border，而是outline。如果您仔细观察，您的边界仍然存在。您可以通过 input { outline: 0 !important } 禁用轮廓。

标签： javascript html css

【解决方案1】：

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

HTML

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

CSS

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

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/

【讨论】：