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对象和属性的创建方法
Jan 15 Javascript
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
javaScript中with函数用法实例分析
Jun 08 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
关于redux-saga中take使用方法详解
Feb 27 Javascript
详解node.js的http模块实例演示
Jul 12 Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 Javascript
vue-cli3 取消eslint校验代码的解决办法
Jan 16 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
php 方便水印和缩略图的图形类
2009/05/21 PHP
理解PHP中的stdClass类
2014/04/18 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
TBCompressor js代码压缩
2011/01/05 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
jQuery实现简单轮播图效果
2020/12/27 jQuery
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
毕业生自我推荐
2013/11/04 职场文书
高级技校毕业生自荐信
2013/11/18 职场文书
优秀村官事迹材料
2014/01/10 职场文书
2014年计算机专业个人自我评价
2014/01/19 职场文书
护士试用期自我鉴定
2014/02/08 职场文书
大专毕业生自我鉴定范文(2篇)
2014/09/27 职场文书
2015年推普周活动总结
2015/03/27 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
课程设计感想范文
2015/08/11 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL
Redis基本数据类型List常用操作命令
2022/06/01 Redis
Python使用Opencv打开笔记本电脑摄像头报错解问题及解决
2022/06/21 Python