jQuery实现设置、移除文本框默认值功能
更新时间：2015年01月13日 10:15:55 投稿：junjie
这篇文章主要介绍了jQuery实现设置、移除文本框默认值功能,本文实现是类似html5 placeholder（空白提示）效果,正常时文本框有提示文字,当文本框获得焦点时变为空白,需要的朋友可以参考下
jQuery实现的文本框默认值感应鼠标动作:
本章节介绍一下如何利用jQuery实现文本框默认值感应鼠标动作的功能。
比如当文本框获取鼠标焦点的时候，默认值会被清空，当文本框没有输入内容，鼠标焦点离开的时候，又会恢复到默认值。
代码实例:
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>脚本之家</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#email").focus(function(){
var email_txt = $(this).val();
if(email_txt == this.defaultValue){
$(this).val("");
}
})
$("#email").blur(function(){
var email_txt = $(this).val();
if (email_txt == "") {
$(this).val(this.defaultValue);
}
})
})
</script>
</head>
<body>
<p><input type="text" value="请输入邮箱地址" id="email"/></p>
</body>
</html>
上面的代码实现了我们的要求，下面简单介绍一下它的实现原理：
非常的简单，就是为文本框注册focus和blur事件处理函数，当文本框获取焦点的时候，如果文本框的内容和默认值相同，那么就会清空文本框，当焦点离开文本框的时候，如果文本框的内容为空，那么就会恢复到默认值。
或者使用下面的代码：
复制代码 代码如下:
$('.default-value').each(function() {
var default_value = this.value;
$(this).focus(function(){
if(this.value == default_value) {
this.value = '';
}
});
$(this).blur(function(){
if(this.value == '') {
this.value = default_value;
}
});
});
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了jQuery动画效果相关方法,结合实例形式较为详细的分析了jQuery实现动画效果所用到的常见方法与相关注意事项,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了jQuery hover事件简单实现同时绑定2个方法,可实现同时绑定悬停与离开事件的功能,非常简单实用,需要的朋友可以参考下2016-06-06
因为后台要用到该功能，熟悉了下jquery的选择器功能。便实现了jquery版的全选。感觉jquery确实比用javascript节省很多劳力啊..呵呵2011-03-03
jquery实现tab键进行选择后enter键触发click行为
本文主要介绍了jquery键盘事件实现tab键进行选择后enter键触发click行为的方法，这种使用场景为当首页有几个链接需要选择的时候，使用键盘就可以进行触发行为。下面跟着小编一起来看下吧2017-03-03
这篇文章主要介绍了jQuery查找节点方法,结合完整实例形式分析了jQuery针对DOM节点属性的相关操作技巧,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了深入了解query和params的使用区别，路由传参的时候，有俩兄弟，一个叫query，一个叫parmas，你说他们俩长得也不像吧，可这用法实在是太类似了，下面就让我们分别从vue路由和Node接收两个角度讲他们的区别,需要的朋友可以参考下2019-06-06
这里给大家分享的是一段使用EasyUI中实现form表单提交的方法的核心代码，小伙伴们根据自己的需求补全form部分吧，希望大家能够喜欢。2015-03-03
文章十分详尽的汇总了jquery常用的方法，并进行了对比，同时附送示例，是篇非常不错的文章，希望对大家有所帮助2014-11-11
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。下面通过本文给大家分享jQuery中关于Ajax的几个常用的函数，需要的的朋友参考下2017-07-07
这篇文章主要以实例的方式详细介绍了jQuery结合GridView控件的使用方法，感兴趣的小伙伴们可以参考一下2016-01-01
最新评论