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 相关文章推荐
验证javascript中Object和Function的关系的三段简单代码
Jun 27 Javascript
js过滤数组重复元素的方法
Sep 05 Javascript
jQuery 一个图片切换的插件
Oct 09 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
Jun 07 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
Vue中v-show添加表达式的问题(判断是否显示)
Mar 26 Javascript
vue.js配合$.post从后台获取数据简单demo分享
Aug 11 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 Javascript
vue2实现provide inject传递响应式
May 21 Vue.js
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文件怎么打开 如何执行php文件
2011/12/21 PHP
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
PHP 实现类似js中alert() 提示框
2015/03/18 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
用JavaScript调用WebService的示例
2008/04/07 Javascript
js 提交和设置表单的值
2008/12/19 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
javascript函数自动执行常用方法汇总
2016/03/28 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
2019/09/11 Javascript
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
python中定义结构体的方法
2013/03/04 Python
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
详解Python的循环结构知识点
2019/05/20 Python
Python登录系统界面实现详解
2019/06/25 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
Oracle快照(snapshot)
2015/03/13 面试题
专科文秘应届生求职信
2013/11/18 职场文书
九年级化学教学反思
2014/01/28 职场文书
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
2015年大学生工作总结
2015/04/21 职场文书
会议承办单位欢迎词
2019/07/09 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python