文字框input聚焦失焦樣式實作程式碼_javascript技巧

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

文本框的html代碼假設如下：

複製代碼 代碼如下:

Name:

Password:

Textarea:

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

$(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(>

$(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”。 一切都搞定了！