如何使文本框邊框顏色使用JavaScript或jQuery淡入焦點

如何使文本框邊框的顏色在聚焦時淡入另一種顏色？例如，如果邊框顏色是#ddd，那麼用戶將注意力集中在文本框上，它會淡入＃0266C8，當它們沒有對焦時，它會再次淡入#ddd。這裏是我的代碼：如何使文本框邊框顏色使用JavaScript或jQuery淡入焦點

<!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>

任何幫助將不勝感激。謝謝，奧馬爾。

來源

2014-01-21 16.uk

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

來源

2014-01-21 17:12:55 aksu

非常感謝！當它沒有重點時，有沒有淡出的方法？ –

是的，只需將這些轉換也轉換爲主要元素即可。我編輯了我的帖子。 – aksu

謝謝！這正是我需要的！ –

你可以使用：

.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; 
}

來源

2014-01-21 17:11:53

您可以嘗試在這裏使用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

來源

2014-01-21 17:12:36 Felix

謝謝淡出延遲！這正是我需要的！ –

@ExTrEeMeO很高興幫助:) – Felix

如何使文本框邊框顏色使用JavaScript或jQuery淡入焦點

回答

相關問題