文本框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 相关文章推荐
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 Javascript
jQuery+HTML5美女瀑布流布局实现方法
Sep 21 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
微信小程序学习之数据处理详解
Jul 05 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
Jul 07 Javascript
静态页面实现 include 引入公用代码的示例
Sep 25 Javascript
基于vue-video-player自定义播放器的方法
Mar 21 Javascript
详解小程序input框失焦事件在提交事件前的处理
May 05 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
Jul 09 Javascript
JavaScript定时器常见用法实例分析
Nov 15 Javascript
vue中的过滤器及其时间格式化问题
Apr 09 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原创论坛
2006/10/09 PHP
十天学会php之第九天
2006/10/09 PHP
php 文件上传实例代码
2012/04/19 PHP
php中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
在新窗口打开超链接的方法小结
2013/04/14 Javascript
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
python for循环输入一个矩阵的实例
2018/11/14 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
培训主管的岗位职责
2013/11/23 职场文书
红领巾广播站广播稿
2014/02/01 职场文书
新农村建设标语
2014/06/24 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
golang DNS服务器的简单实现操作
2021/04/30 Golang
gojs实现蚂蚁线动画效果
2022/02/18 Javascript
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL
TS 类型兼容教程示例详解
2022/09/23 Javascript