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


Posted in Javascript onOctober 12, 2012

首先用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”。

一切搞定了!

Javascript 相关文章推荐
js 操作css实现代码
Jun 11 Javascript
javascript框架设计之种子模块
Jun 23 Javascript
canvas的神奇用法
Feb 03 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
JS实现显示当前日期的实例代码
Jul 03 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
vue 实现特定条件下绑定事件
Nov 09 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 Javascript
js 将多个对象合并成一个对象 assign方法的实现
Sep 24 Javascript
微信小程序接入vant Weapp组件的详细步骤
Oct 28 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
Oct 12 #Javascript
innerHTML与jquery里的html()区别介绍
Oct 12 #Javascript
jquery聚焦文本框与扩展文本框聚焦方法
Oct 12 #Javascript
Jquery index()方法 获取相应元素索引值
Oct 12 #Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 #Javascript
利用谷歌地图API获取点与点的距离的js代码
Oct 11 #Javascript
关于JS控制代码暂停的实现方法分享
Oct 11 #Javascript
You might like
建立文件交换功能的脚本(三)
2006/10/09 PHP
PHP Document 代码注释规范
2009/04/13 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
jQuery 创建Dom元素
2010/05/07 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
jquery三个关闭弹出层的小示例
2013/11/05 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
jQuery数据类型小结(14个)
2016/01/08 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
vue-for循环嵌套操作示例
2019/01/28 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
python中有帮助函数吗
2020/06/19 Python
python使用QQ邮箱实现自动发送邮件
2020/06/22 Python
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
AE美国鹰美国官方网站:American Eagle Outfitters
2016/08/22 全球购物
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
餐饮业会计岗位职责
2013/12/19 职场文书
项目计划书范文
2014/01/09 职场文书
工作会议欢迎词
2014/01/16 职场文书
2014元旦晚会策划方案
2014/02/19 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
公务员年度个人总结
2015/02/12 职场文书
九年级化学教学反思
2016/02/22 职场文书
话题作文之关于呼唤
2019/11/29 职场文书
springboot 多数据源配置不生效遇到的坑及解决
2021/11/17 Java/Android