快捷導(dǎo)航

文本框input聚焦失焦樣式實現(xiàn)代碼

更新時間：2012年10月12日 13:48:51 作者：

文本框input聚焦失焦樣式實現(xiàn)代碼，需要的朋友可以參考下

首先用css的偽類：focus可以改變。

文本框的 html代碼假設(shè)如下：

 
<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框的聚焦時候的樣式。加上個紅色的邊框和灰色的背景。

現(xiàn)在就這么簡單的解決了嗎？用瀏覽器（Firefox, Safari, IE7）來測試，一切ok，不過不支持IE6.

想讓IE6也是一樣漂亮的效果只能借助接js了，這里我用jquery給大家做一個效果。

復(fù)制代碼代碼如下:

 
$(document).ready(function(){ 
$("input[@type='text'], input[@type='password'], textarea").focus( function(){ $(this). css({background:"#ccc", border:"1px solid #f00"})} ); 
}); 

jquery做起來是不是也很簡單，感覺和css的書寫方式差不多吧！

這只是聚焦?fàn)?態(tài)，jquery失焦?fàn)顟B(tài)是要你給出指示的，很傻很天真，它自己不會變回來，那就在給加上失焦?fàn)顟B(tài)。

復(fù)制代碼代碼如下:

 
$(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”})}); 
}) 

失焦以后背景邊成白色，邊框變成灰色。

當(dāng)然你也可以用 jquery的addClass和removeClass來簡化代碼：

復(fù)制代碼代碼如下:

 
$(document).ready(function(){ 
$("input[@type='text'], input[@type='password'], textarea").focus(function(){$(this).addClass("focus")}).blur(function(){$(this).removeClass("focus")}); 
}) 

先給input框給個默認(rèn)樣式，聚焦的時候用addClass加上css“focus”，失焦的時候在用 removeClass去掉css“focus”。

一切搞定了！

您可能感興趣的文章: