如何使用 JavaScript 或 jQuery 使文本框边框颜色淡入焦点答案

【问题标题】：How to make textbox border color fade in on focus using JavaScript or jQuery如何使用 JavaScript 或 jQuery 使文本框边框颜色淡入焦点
【发布时间】：2014-01-22 01:12:55
【问题描述】：

如何使文本框边框的颜色在获得焦点时淡入另一种颜色？例如，如果边框颜色是#ddd，那么用户将注意力集中在文本框上，它会淡入#0266C8，当他们不聚焦时，它会再次淡入#ddd。这是我的代码：

<!doctype html>
<html>
<head>
<title>Project</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function passwordCheck(y){
    var x = y.value;
    if(x.length>5) {
        document.getElementById("error").innerHTML="Limit is 5 characters";
    } else {
        if(x.length<6) {
            document.getElementById("error").innerHTML="";
        }
    }
}
</script>
<style type="text/css">
body {
    margin:auto;
    font-family:arial, sans-serif;
    padding-top:100px;
}
.container {
    width:920px;
    margin:auto;
    text-align:center;
}
.main_text {
    font-family:"Bebas Neue";
    font-size:76px;
    color:green;
    margin-bottom:10px;
}
.textbox1 {
    border: 4px solid #ddd;
    width: 888px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 2em;
    outline: none;
    font-family: sans-serif;
    border-radius:100px;
    height:48px;
}
.textbox1:focus {
    border: 4px solid #0266C8;
}
#error {
    font-size:24px;
    color:red;
    font-family:"Bebas Neue";
}
</style>
</head>
<body>
<div class="container">
    <span class="main_text">Password Strength Checker</span><br>
    <input name="textbox1" onkeyup="passwordCheck(this);" onKeyPress="passwordCheck(this);" onChange="passwordCheck(this);" onKeyDown="passwordCheck(this);" type="password" class="textbox1" placeholder="Enter Password" style="margin-top:10px;" autofocus><br><br>
    <div id="error"></div>
</div>
</body>
</html>

任何帮助将不胜感激。谢谢，奥马尔。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

使用 CSS3 过渡。

.textbox1 {
    border: 4px solid #ddd;
    width: 888px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 2em;
    outline: none;
    font-family: sans-serif;
    border-radius:100px;
    height:48px;

     transition: background .5s ease-out; // global
    -moz-transition: all .5s ease-out; // for mozilla
    -o-transition: all .5s ease-out; // for opera
    -webkit-transition: all .5s ease-out; //for webkit, chrome or safari
}
.textbox1:focus {
    border: 4px solid #0266C8;
     transition: background .5s ease-in; // global
    -moz-transition: all .5s ease-in; // for mozilla
    -o-transition: all .5s ease-in; // for opera
    -webkit-transition: all .5s ease-in; //for webkit, chrome or safari
}

你可以在.5s ease-in上设置淡入淡出延迟

【讨论】：

非常感谢！不对焦有没有办法淡出？
是的，只要把这些过渡也放到主元素上。我编辑了我的帖子。
谢谢！这正是我所需要的！

【解决方案2】：

您可以在这里尝试使用CSS transition：

transition: border-color 1s linear;
-moz-transition: border-color 1s linear;   
-o-transition: border-color 1s linear; 
-webkit-transition: border-color 1s linear;

Fiddle Demo

【讨论】：

谢谢！！这正是我所需要的！
@ExTrEeMeO 很高兴它有帮助:)

【解决方案3】：

你可以使用：

.container input{
 -moz-transition: all 1s linear;
 -webkit-transition: all 1s linear;
 -o-transition: all 1s linear;
 transition: all 1s linear;
}

.container input:focus {
  border: 1px solid #4F94CD;
}

【讨论】：