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 相关文章推荐
解决jQuery插件tipswindown与hintbox冲突
Nov 05 Javascript
基于JQuery制作的产品广告效果
Dec 08 Javascript
神奇的7个jQuery 3D插件整理
Jan 06 Javascript
json格式的时间显示为正常年月日的方法
Sep 08 Javascript
javascript限制文本框输入值类型的方法
May 07 Javascript
js+canvas简单绘制圆圈的方法
Jan 28 Javascript
js解决movebox移动问题
Mar 29 Javascript
Web打印解决方案之普通报表打印功能
Aug 29 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
bootstrap IE8 兼容性处理
Mar 22 Javascript
Vue.js更改调试地址端口号的实例
Sep 19 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 30 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
php引用返回与取消引用的详解
2013/06/08 PHP
解析strtr函数的效率问题
2013/06/26 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
也说JavaScript中String类的replace函数
2011/09/22 Javascript
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
JS截取字符串常用方法整理及使用示例
2013/10/18 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
JS字典Dictionary类定义与用法示例
2019/02/01 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
python 矩阵增加一行或一列的实例
2018/04/04 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
python matplotlib拟合直线的实现
2019/11/19 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
html+css实现自定义图片上传按钮功能
2019/09/04 HTML / CSS
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
allbeauty美国:英国在线美容店
2019/03/11 全球购物
神路信息Java面试题目
2013/03/31 面试题
办公室经理岗位职责
2014/01/01 职场文书
入职担保书怎么写
2014/05/12 职场文书
给上级领导的感谢信
2015/01/22 职场文书
医学生自荐信范文
2015/03/05 职场文书
大学生团日活动总结
2015/05/06 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
邓小平文选读书笔记
2015/06/29 职场文书