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 相关文章推荐
js停止输出代码
Jul 20 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 Javascript
javascript获取xml节点的最大值(实现代码)
Dec 11 Javascript
javascript父子页面通讯实例详解
Jul 17 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 Javascript
jQuery判断是否存在滚动条的简单方法
Sep 17 Javascript
详解Vue.use自定义自己的全局组件
Jun 14 Javascript
json数据格式常见操作示例
Jun 13 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
Dec 06 Javascript
vue开发中遇到的问题总结
Apr 07 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 23 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
业余方法DIY电子管FM收音机
2021/03/02 无线电
php 清除网页病毒的方法
2008/12/05 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
三种方式实现瀑布流布局
2017/02/10 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
前端常见跨域解决方案(全)
2017/09/19 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
js动态引入的四种方法
2018/05/05 Javascript
javascript对HTML字符转义与反转义
2018/12/13 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
[01:41]DOTA2超级联赛专访YYF 称一辈子难忘TI2
2013/05/28 DOTA
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
python调用百度语音识别api
2018/08/30 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
Python中的全局变量如何理解
2020/06/04 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
文明学生标兵事迹
2014/01/21 职场文书
安全保证书
2015/01/16 职场文书
考研英语复习计划
2015/01/19 职场文书
求职自我推荐信
2015/03/24 职场文书
公司会议开幕词
2016/03/03 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书
Go语言-为什么返回值为接口类型,却返回结构体
2021/04/24 Golang
Python实现单例模式的5种方法
2021/06/15 Python
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers