jQuery focus和blur事件的应用详解
更新时间：2014年01月26日 10:01:47 作者：
本篇文章主要是对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>
在填写表单时需要实现如下效果
二、具体实现
复制代码 代码如下:
<!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>
您可能感兴趣的文章:
- jQuery中$.click()无效问题分析
- jquery单选框radio绑定click事件实现方法
- jquery bind(click)传参让列表中每行绑定一个事件
- 使用jQuery的attr方法来修改onclick值
- jquery 为a标签绑定click事件示例代码
- jquery trigger伪造a标签的click事件取代window.open方法
- JQuery给元素绑定click事件多次执行的解决方法
- jQuery防止click双击多次提交及传递动态函数或多参数
- jquery focus(fn),blur(fn)方法实例代码
- jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
相关文章
jQuery中为我们提供了很多有用的方法和属性，自己总结的一些常用的函数，方法。个人认为在开发中会比较常用的，仅供大家学习和参考。2009-06-06
现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, 性能问题还是需要引起重视的.2010-02-02
jquery UI Datepicker时间控件的使用方法（基础版）
这篇文章主要介绍了jquery ui datepicker时间控件的使用方法，需要的朋友可以参考下2015-11-11
这篇文章主要介绍了jquery带下拉菜单和焦点图代码，推荐给大家，有需要的小伙伴可以参考下。2015-08-08
这篇文章主要介绍了jQuery插件实现弹性运动,结合完整实例形式分析了jQuery插件扩展结合定时器实现页面元素抖动的相关操作技巧,需要的朋友可以参考下2018-07-07
jquery的构造函数很好的运用的javascript的充分利用了JavsScript语言的动态性——对行参的类型和个数没有的严格要求，以至于一个函数可以实现多种功能需求，也为JavaScript语言的多态性提供了基础，在这个构造函数中，提供了六种不同的调用格式（根据官方API文档）2015-05-05
浮动DIV定时显示提示信息,如操作成功, 失败等,需要的朋友可以参考下。2011-02-02
jquery实现的图文滚动效果,图文内容经过指定的间隔时间自动向下滚动显示,效果非常酷。有需要的小伙伴可以参考下。2015-05-05
这篇文章主要为大家详细介绍了jQuery实现表格元素动态创建功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
前几篇文章中的示例代码，去掉了几个 bug, 这里一起提供下载。2010-08-08
最新评论