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中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 Javascript
vue的mixins属性详解
Mar 14 Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 Javascript
layui table单元格事件修改值的方法
Sep 24 Javascript
vue之a-table中实现清空选中的数据
Nov 07 Javascript
vue3.0 上手体验
Sep 21 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
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
Vue中的验证登录状态的实现方法
2019/03/09 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
人力资源管理专业毕业生自我评价
2013/09/21 职场文书
竟聘演讲稿范文
2013/12/31 职场文书
英文商务邀请信
2014/01/22 职场文书
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
元宵节主持词
2014/03/25 职场文书
道德演讲稿
2014/05/21 职场文书
企业年度评优方案
2014/06/02 职场文书
员工薪酬激励方案
2014/06/13 职场文书
工作表扬信
2015/01/17 职场文书
孔子观后感
2015/06/08 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
正确的理解和使用Django信号(Signals)
2021/04/14 Python
Python实现聚类K-means算法详解
2022/07/15 Python