jQuery设置和移除文本框默认值的方法


Posted in Javascript onMarch 09, 2015

本文实例讲述了jQuery设置和移除文本框默认值的方法。分享给大家供大家参考。具体分析如下:

开始时,文本框设定一个默认值。当光标移动到文本框时,如果文本框当前值是默认值,那么清空;离开文本框时,文本框值如果为空,那么将文本框值设置为默认值。

代码如下:

$(document).ready(function() {
  //each遍历文本框
  $(".input").each(function() {
    //保存当前文本框的值
    var vdefault = this.value;
    $(this).focus(function() {
      //获得焦点时,如果值为默认值,则设置为空
      if (this.value == vdefault) {
        this.value = "";
      }
    });
    $(this).blur(function() {
      //失去焦点时,如果值为空,则设置为默认值
      if (this.value == "") {
        this.value = vdefault;
      }
    });
  });
});

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery keypress,keyup,onpropertychange键盘事件
Jun 25 Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 Javascript
200行HTML+JavaScript实现年会抽奖程序
Jan 22 Javascript
小程序如何写动态标签的实现方法
Feb 05 Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 16 Javascript
jQuery读取XML文件内容的方法
Mar 09 #Javascript
JQuery动态添加和删除表格行的方法
Mar 09 #Javascript
Python脚本后台运行的几种方式
Mar 09 #Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 #Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 #Javascript
JS实现网页表格自动变大缩小的方法
Mar 09 #Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 #Javascript
You might like
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
PHP之autoload运行机制实例分析
2014/08/28 PHP
php实现网页端验证码功能
2017/07/11 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
2011/08/08 Javascript
jQuery Tools Dateinput使用介绍
2012/07/14 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
2013/07/09 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
浅析javascript的return语句
2015/12/15 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
解决bootstrap-select 动态加载数据不显示的问题
2018/08/10 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
使用Node.js实现base64和png文件相互转换的方法
2020/03/11 Javascript
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
Python基于回溯法子集树模板解决全排列问题示例
2017/09/07 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
Django组件content-type使用方法详解
2019/07/19 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
庆元旦广播稿
2014/02/10 职场文书
房屋买卖协议书
2014/04/10 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
骨干教师申报材料
2014/12/17 职场文书
餐厅收银员岗位职责
2015/04/07 职场文书
2019关于实习生工作安排及待遇的管理方案!
2019/07/16 职场文书