编程 Javascript

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 相关文章推荐

Firefox div高度自适应

Apr 28 Javascript

JavaScript 创建对象

Jul 17 Javascript

jQuery学习7 操作JavaScript对象和集合的函数

Feb 07 Javascript

javascript重复绑定事件造成的后果说明

Mar 02 Javascript

jQuery使用之标记元素属性用法实例

Jan 19 Javascript

javascript制作幻灯片（360度全景图片）

Jul 28 Javascript

JS简单判断字符在另一个字符串中出现次数的2种常用方法

Apr 20 Javascript

react-router实现跳转传值的方法示例

May 27 Javascript

详解JavaScript按概率随机生成事件

Aug 02 Javascript

jQuery实现的表格前端排序功能示例

Sep 18 jQuery

基于Vue2x的图片预览插件的示例代码

May 14 Javascript

使用vue点击li,获取当前点击li父辈元素的属性值方法

Sep 12 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高级OOP技术演示

2009/08/27 PHP

详解PHP中的Traits

2015/07/29 PHP

PHP云打印类完整示例

2016/10/15 PHP

PHP实现批量清空删除指定文件夹所有内容的方法

2017/05/30 PHP

thinkPHP框架实现的短信接口验证码功能示例

2018/06/20 PHP

PHP实现关键字搜索后描红功能示例

2019/07/03 PHP

JS实现点击链接取消跳转效果的方法

2014/01/24 Javascript

js返回前一页刷新本页重载页面

2014/07/29 Javascript

深入理解JavaScript系列（27）：设计模式之建造者模式详解

2015/03/03 Javascript

javascript实现checkBox的全选，反选与赋值

2015/03/12 Javascript

Backbone.js框架中简单的View视图编写学习笔记

2016/02/14 Javascript

vue.js入门教程之基础语法小结

2016/09/01 Javascript

Bootstrap响应式导航由768px变成992px的实现代码

2017/06/15 Javascript

浅谈sass在vue注意的地方

2017/08/10 Javascript

基于JavaScript实现新增内容滚动播放效果附完整代码

2017/08/24 Javascript

解决vue单页使用keep-alive页面返回不刷新的问题

2018/03/13 Javascript

深入了解javascript 数组的sort方法

2018/06/01 Javascript

vue中slot（插槽）的介绍与使用

2018/11/12 Javascript

vue使用Google地图的实现示例代码

2018/12/19 Javascript

vue 限制input只能输入正数的操作

2020/08/05 Javascript

Vue+element-ui添加自定义右键菜单的方法示例

2020/12/08 Vue.js

在GitHub Pages上使用Pelican搭建博客的教程

2015/04/25 Python

python脚本监控docker容器

2016/04/27 Python

Python中列表和元组的使用方法和区别详解

2020/12/30 Python

Python使用plotly绘制数据图表的方法

2017/07/18 Python

Django原生sql也能使用Paginator分页的示例代码

2017/11/15 Python

python使用Thread的setDaemon启动后台线程教程

2020/04/25 Python

使用HTML和CSS实现的标签云效果(附demo)

2021/02/03 HTML / CSS

戛纳奢侈品商店：Jacques Loup法国

2019/11/04 全球购物

联谊会主持词

2014/03/26 职场文书

乡镇党员群众路线教育实践活动对照检查材料思想汇报

2014/10/05 职场文书

交通事故死亡赔偿协议书

2014/12/03 职场文书

发布会邀请函

2015/01/31 职场文书

求职信范文怎么写

2015/03/19 职场文书

聘任合同书

2015/09/21 职场文书

《迟到》教学反思

2016/02/24 职场文书