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 相关文章推荐
在JavaScript中获取请求的URL参数[正则]
Dec 25 Javascript
select标签模拟/美化方法采用JS外挂式插件
Apr 01 Javascript
jQuery中extend函数详解
Jul 13 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
Immutable 在 JavaScript 中的应用
May 02 Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 Javascript
js实现小窗口拖拽效果
Dec 03 Javascript
jQuery窗口拖动功能的实现代码
Feb 04 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
Jun 26 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 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/20 PHP
PHP FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)
2014/05/10 PHP
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
ucenter通信原理分析
2015/01/09 PHP
PHP实现事件机制的方法
2015/07/10 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
安装Python的教程-Windows
2017/07/22 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
Python时间序列缺失值的处理方法(日期缺失填充)
2019/08/11 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
创建卫生先进单位实施方案
2014/03/10 职场文书
自主招生学校推荐信
2014/09/26 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
语文教师求职信范文
2015/03/20 职场文书
离职信范本
2015/06/23 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书