文本框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所必须要知道的一些
Mar 07 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 Javascript
jquery.validate的使用说明介绍
Nov 12 Javascript
使用text方法获取Html元素文本信息示例
Sep 01 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
vue导出html、word和pdf的实现代码
Jul 31 Javascript
学习React中ref的两个demo示例
Aug 14 Javascript
详解js删除数组中的指定元素
Oct 31 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 Javascript
webpack4之如何编写loader的方法步骤
Jun 06 Javascript
javascript函数式编程基础
Sep 15 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
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
动态调用css文件——jquery的应用
2007/02/20 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
2012/10/11 Javascript
JSONP之我见
2015/03/24 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
AngularJS指令用法详解
2016/11/02 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
Vue的百度地图插件尝试使用
2017/09/06 Javascript
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
构建Vue大型应用的10个最佳实践(小结)
2019/11/07 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
Python中os和shutil模块实用方法集锦
2014/05/13 Python
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
python中字典增加和删除使用方法
2020/09/30 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
戴尔新西兰官网:Dell New Zealand
2020/01/07 全球购物
请说出几个常用的异常类
2013/01/08 面试题
写好求职信第一句话的技巧
2013/10/26 职场文书
新员工入职感言
2014/02/01 职场文书
委托书样本
2014/04/02 职场文书
请假条的格式
2014/04/11 职场文书
禁止高声喧哗的标语
2014/06/11 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
购房个人委托书范本
2014/10/11 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书
2019年消防宣传标语集锦
2019/11/21 职场文书
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python