首先用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”。 一切搞定了！

　　推荐阅读

　　js indexOf()定义和用法

返回 String 对象内第一次出现子字符串的字符位置。 strObj.indexOf(subString[, startIndex]) 参数 strObj 必选项。String 对象或文字。 subString 必选项。要在 String 对象中查找的子字符串。 starIndex 可选项>>>详细阅读

本文标题：文本框input聚焦失焦样式实现代码

地址：http://www.17bianji.com/kaifa2/JS/23038.html

 1/2    1