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 相关文章推荐
非常不错的功能强大代码简单的管理菜单美化版
Jul 09 Javascript
JSON 入门指南 想了解json的朋友可以看下
Aug 26 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 Javascript
js实现图片轮换效果代码
Apr 16 Javascript
node.js中的fs.createReadStream方法使用说明
Dec 17 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
AngularJS自定义指令实现面包屑功能完整实例
May 17 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
Aug 17 Javascript
生产制造追溯系统之在线打印功能
Jun 03 Javascript
Nuxt.js实战和配置详解
Aug 05 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项目应该注意的几点事项分享
2013/12/20 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
jQuery中Form相关知识汇总
2015/01/06 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
使用eslint和githooks统一前端风格的技巧
2020/07/29 Javascript
Python pass详细介绍及实例代码
2016/11/24 Python
Python unittest模块用法实例分析
2018/05/25 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
Python多进程原理与用法分析
2018/08/21 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
Python print不能立即打印的解决方式
2020/02/19 Python
土耳其国际性时尚购物网站:Modanisa
2018/01/19 全球购物
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
什么是反射?如何实现反射?
2016/07/25 面试题
大学生毕业自我评价范文分享
2013/11/11 职场文书
学生干部的自我评价分享
2014/01/18 职场文书
行政文秘岗位职责范本
2014/02/10 职场文书
财务学生的职业生涯发展
2014/02/11 职场文书
同居协议书范本
2014/04/23 职场文书
物流专业自荐信
2014/05/23 职场文书
捐款通知怎么写
2015/04/24 职场文书
二审答辩状范文
2015/05/22 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
js不常见操作运算符总结
2021/11/20 Javascript
python脚本框架webpy模板赋值实现
2021/11/20 Python