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 相关文章推荐
JQuery获取文本框中字符长度的代码
Sep 29 Javascript
jQuery on()方法使用技巧详解
Apr 16 Javascript
在AngularJS中使用AJAX的方法
Jun 17 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
小程序点击图片实现自动播放视频
May 29 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
vue中keep-alive,include的缓存问题
Nov 26 Javascript
详解Vue的七种传值方式
Feb 08 Vue.js
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
大师制作的中短波矿石收音机
2020/04/02 无线电
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
迅速确定php多维数组的深度的方法
2014/01/07 PHP
php+mysql实现数据库随机重排实例
2014/10/17 PHP
PHP中判断文件存在使用is_file还是file_exists?
2015/04/03 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
详解如何在Javascript和Sass之间共享变量
2019/11/13 Javascript
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
python实现事件驱动
2018/11/21 Python
Python实现的微信红包提醒功能示例
2019/08/22 Python
python爬虫 正则表达式解析
2019/09/28 Python
如何使用python进行pdf文件分割
2019/11/11 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
Chinti & Parker官网:奢华羊绒女装和创新针织设计
2021/01/01 全球购物
网游商务专员求职信
2013/10/15 职场文书
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
专升本个人自我评价
2013/12/22 职场文书
公司庆典邀请函范文
2014/01/13 职场文书
学术会议主持词
2014/03/17 职场文书
三八妇女节标语
2014/10/09 职场文书
高中体育课教学反思
2016/02/16 职场文书
python模板入门教程之flask Jinja
2022/04/11 Python