jquery控制表单输入框显示默认值的方法


Posted in Javascript onMay 22, 2015

本文实例讲述了jquery控制表单输入框显示默认值的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html>
<html>
<head>
<script language="javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('.someClass').each(function() {
  var $this = $(this);
  var defaultVal = $this.attr('title');
  $this.focus(function() {
   if ($this.val() === defaultVal) {
    $this.val('');
   }
  });
  $this.blur(function() {
   if ($this.val().length === 0) {
    $this.val(defaultVal);
   }
  });
 });
});
</script>
<style>
input {
 display:block;
 margin-bottom:5px;
}
</style>
</head>
<body>
<input class="someClass" type="text" title="Name" value="Name" />
<input class="someClass" type="text" title="Email Address"
value="Email Address" />
<input class="someClass" type="text" title="Default Value Here"
value="Insert form refill here" />
</body>
</html>

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

Javascript 相关文章推荐
JavaScript 克隆数组最简单的方法
Feb 12 Javascript
js AspxButton的客户端操作
Jun 26 Javascript
js 跨域和ajax 跨域问题小结
Jul 01 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
在myeclipse中如何加入jquery代码提示功能
Jun 03 Javascript
javascript删除一个html元素节点的方法
Dec 20 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
网络传输协议(http协议)
Nov 18 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 Javascript
微信小程序一周时间表功能实现
Oct 17 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
Aug 03 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 #Javascript
JavaScript检测鼠标移动方向的方法
May 22 #Javascript
jQuery实现强制cookie过期方法汇总
May 22 #Javascript
jQuery判断指定id的对象是否存在的方法
May 22 #Javascript
jQuery实现转动随机数抽奖效果的方法
May 21 #Javascript
JQuery分屏指示器图片轮换效果实例
May 21 #Javascript
jQuery聚合函数实例
May 21 #Javascript
You might like
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
删除无限级目录与文件代码共享
2006/07/12 PHP
php处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
php+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
js 文件引入实现代码
2010/04/23 Javascript
JavaScript 对象模型 执行模型
2010/10/15 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
JS中微信小程序自定义底部弹出框
2016/12/22 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
Bootstrap 树控件使用经验分享(图文解说)
2017/11/06 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
node.js基础知识汇总
2020/08/25 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
python实现在windows下操作word的方法
2015/04/28 Python
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
Python和Sublime整合过程图示
2019/12/25 Python
Python3 webservice接口测试代码详解
2020/06/23 Python
Python子进程subpocess原理及用法解析
2020/07/16 Python
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
性能服装:HYLETE
2018/08/14 全球购物
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
开发中都用到了那些设计模式?用在什么场合?
2014/08/21 面试题
Java面试中常遇到的问题,也是需要注意的几点
2013/08/30 面试题
史上最全面的Java面试题汇总!
2015/02/03 面试题
商场端午节活动方案
2014/01/29 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
垂直极限观后感
2015/06/08 职场文书
使用react-virtualized实现图片动态高度长列表的问题
2021/05/28 Javascript