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

我正在实现用户必须输入其电子邮件地址的HTML输入字段。我也正在使用JavaScript在相同的输入字段上实现验证。使用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更改焦点颜色，但是我没有设法使其正常工作。

来源

2017-10-05 Robert Buttigieg

蓝色的，你看到的是不是一个'border'，而是一个'outline'。如果仔细观察，你的边界仍然存在。您可以通过执行'input {outline：0！important}'来禁用轮廓。 – Santi

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

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/

来源

2017-10-05 21:46:41

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

回答

相关问题