使用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更改輸入字段焦點的顏色

回答

相關問題