文本框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 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
javascript FormatNumber函数实现方法
Dec 30 Javascript
JAVASCRIPT style 中visibility和display之间的区别
Jan 22 Javascript
Cookie 小记
Apr 01 Javascript
基于jQuery的简单九宫格实现代码
Aug 09 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
Nov 23 Javascript
浅谈jquery点击label触发2次的问题
Jun 12 Javascript
vue.js中指令Directives详解
Mar 20 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
Dec 03 Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 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
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
php实现与erlang的二进制通讯实例解析
2014/07/23 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
js注意img图片的onerror事件的分析
2011/01/01 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
js实现表格筛选功能
2017/01/18 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
python实现发送和获取手机短信验证码
2016/01/15 Python
python shell根据ip获取主机名代码示例
2017/11/25 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
Java文件和目录(IO)操作
2014/08/26 面试题
修理厂厂长岗位职责
2014/01/30 职场文书
旅游管理专业大学生职业规划书
2014/02/27 职场文书
倡议书格式模板
2014/05/13 职场文书
商场租赁意向书
2014/07/30 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
2014法制宣传日活动总结范文
2014/11/01 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis