jQuery focus和blur事件的应用详解


Posted in Javascript onJanuary 26, 2014

一、需求原因
在填写表单时需要实现如下效果
jQuery focus和blur事件的应用详解
二、具体实现

<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>鼠标点击后无文字,挪开鼠标后有文字</title>
<script language="JavaScript"src="../jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
     $(function(){
         /*进入焦点时触发*/
         $("#account").focus(function(){
              varoldValue = $(this).val();
              if(oldValue == this.defaultValue){
                  $(this).val("");
              }
         });  
         /*失去焦点时触发*/
         $("#account").blur(function(){
              alert("12");
              varoldValue = $(this).val();
              if(oldValue == ""){
                   $(this).val(this.defaultValue);
              }
         });
     });
</script>
</head>
<body>
帐号:<input id="account"name="account" type="text" value="请输入帐号">
</body>
</html>
Javascript 相关文章推荐
IE与firefox之jquery用法区别
Oct 03 Javascript
javascript中的undefined 与 null 的区别  补充篇
Mar 17 Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 Javascript
JS关键字球状旋转效果的实例代码
Nov 29 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
Dec 30 Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
jQuery on()方法使用技巧详解
Apr 16 Javascript
Web安全测试之XSS实例讲解
Aug 15 Javascript
vue组件Prop传递数据的实现示例
Aug 17 Javascript
微信小程序利用云函数获取手机号码
Dec 17 Javascript
js简单实现自动生成表格功能示例
Jun 02 Javascript
当jQuery1.7遇上focus方法的问题
Jan 26 #Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 #Javascript
使用javascript为网页增加夜间模式
Jan 26 #Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 #Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
Jan 26 #Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
Jan 26 #Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 #Javascript
You might like
动易数据转成dedecms的php程序
2007/04/07 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
发现的以前不知道的函数
2006/09/19 Javascript
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
ppk谈JavaScript style属性
2008/10/10 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
[47:42]完美世界DOTA2联赛PWL S2 GXR vs Ink 第一场 11.19
2020/11/20 DOTA
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
python 标准差计算的实现(std)
2019/07/29 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
HTML5新增加的功能详解
2016/09/05 HTML / CSS
H5离线存储Manifest原理及使用
2020/04/28 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
荣耀商城:HIHONOR
2020/11/03 全球购物
LINUX下线程,GDI类的解释
2012/04/17 面试题
物业管理求职自荐信
2013/09/25 职场文书
教师政风行风评议心得体会
2014/10/21 职场文书
公积金贷款承诺书
2015/04/30 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
超市主管竞聘书
2015/09/15 职场文书
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
Python Matplotlib绘制动画的代码详解
2022/05/30 Python