jQuery实现设置、移除文本框默认值功能


Posted in Javascript onJanuary 13, 2015

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;

               }

       });
});
Javascript 相关文章推荐
js 禁用浏览器的后退功能的简单方法
Dec 10 Javascript
两个select之间option的互相添加操作(jquery实现)
Nov 12 Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
JS中JSON对象和String之间的互转及处理技巧
Apr 06 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
JS利用cookies设置每隔24小时弹出框
Apr 20 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
Vue中使用vee-validate表单验证的方法
May 09 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
JS查找孩子节点简单示例
Jul 25 Javascript
Vue项目开发常见问题和解决方案总结
Sep 11 Javascript
javascript面向对象快速入门实例
Jan 13 #Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 #Javascript
jQuery实现拖动调整表格单元格大小的代码实例
Jan 13 #Javascript
jQuery trigger()方法用法介绍
Jan 13 #Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 #Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 #Javascript
15个jquery常用方法、小技巧分享
Jan 13 #Javascript
You might like
一个简单的php加密解密函数(动态加密)
2013/06/19 PHP
php简单日历函数
2015/10/28 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
简单JS代码压缩器
2006/10/12 Javascript
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
javascript 面向对象编程基础 多态
2009/08/21 Javascript
JQuery autocomplete 使用手册
2010/04/01 Javascript
Js获取事件对象代码
2010/08/05 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
javascript读取Xml文件做一个二级联动菜单示例
2014/03/17 Javascript
javascript实现依次输入input自动定焦
2014/12/23 Javascript
javascript中去除数组重复元素的实现方法【实例】
2016/04/12 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
AngularJS基于factory创建自定义服务的方法详解
2017/05/25 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
2017/11/27 Javascript
JS实现的判断方法、变量是否存在功能示例
2020/03/28 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
简明 Python 基础学习教程
2007/02/08 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
Python实现接受任意个数参数的函数方法
2018/04/21 Python
python里dict变成list实例方法
2019/06/26 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
运动会广播稿150字
2014/02/19 职场文书
单身证明格式样本
2015/06/15 职场文书
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android