文本框input聚焦失焦樣式實現代碼
2024-05-06 14:21:07
供稿：網友
首先用css的偽類：focus可以改變。
文本框的 html代碼假設如下：
代碼如下:
<dl>
<dt>Name: <dt>
<dd><input type="text" /></dd>
<dt>Password: <dt>
<dd><input type="password" /></dd>
<dt>Textarea: <dt>
<dd><textarea></textarea></dd>
</dl>
css 代碼這樣寫：
input[type="text"]:focus, input[type="password"]:focus, textarea:focus { border: 1px solid #f00; background: #ccc; }
分別列出了文本框、密碼框、還有段落框這三個input框的聚焦時候的樣式。加上個紅色的邊框和灰色的背 景。
現在就這么簡單的解決了嗎？用瀏覽器（Firefox, Safari, IE7）來測試，一切ok，不過不支持IE6.
想 讓IE6也是一樣漂亮的效果只能借助接js了，這里我用jquery給大家做一個效果。
代碼如下:
$(document).ready(function(){
$("input[@type='text'], input[@type='password'], textarea").focus( function(){ $(this). css({background:"#ccc", border:"1px solid #f00"})} );
});
jquery做起來是不是也很簡單，感覺和css的書寫方式差不多吧！
這只是聚焦狀 態，jquery失焦狀態是要你給出指示的，很傻很天真，它自己不會變回來，那就在給加上失焦狀態。
代碼如下:
$(document).ready(function(){
$("input[@type='text'], input[@type='password'], textarea").focus(function(){$(this).css({background:"#ccc", border:"1px solid #f00"})}).blur(function(){$(this).css({background: “#FFF”, border: “1px solid #ccc”})});
})
失焦以后背景邊成白色，邊框變成灰色。
當然你也可以用 jquery的addClass和removeClass來簡化代碼：
代碼如下:
$(document).ready(function(){
$("input[@type='text'], input[@type='password'], textarea").focus(function(){$(this).addClass("focus")}).blur(function(){$(this).removeClass("focus")});
})
先 給input框給個默認樣式，聚焦的時候用addClass加上css“focus”，失焦的時候在用 removeClass去掉css“focus”。
一切搞定了！
