快捷導(dǎo)航

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

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

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

首先用css的偽類(lèi)：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 代碼這樣寫(xiě)：

input[type="text"]:focus, input[type="password"]:focus, textarea:focus { border: 1px solid #f00; background: #ccc; }
分別列出了文本框、密碼框、還有段落框這三個(gè)input框的聚焦時(shí)候的樣式。加上個(gè)紅色的邊框和灰色的背景。

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

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

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

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

jquery做起來(lái)是不是也很簡(jiǎn)單，感覺(jué)和css的書(shū)寫(xiě)方式差不多吧！

這只是聚焦?fàn)?態(tài)，jquery失焦?fàn)顟B(tài)是要你給出指示的，很傻很天真，它自己不會(huì)變回來(lá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來(lái)簡(jiǎn)化代碼：

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

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

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

一切搞定了！

您可能感興趣的文章: