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的固定表头和列头的代码
May 03 Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 Javascript
JavaScript中的连字符详解
Nov 28 Javascript
jquery移除、绑定、触发元素事件使用示例详解
Apr 10 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
五种js判断是否为整数类型方式
Dec 03 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
ionic+html5+API实现双击返回键退出应用
Sep 17 Javascript
Vue组件模板的几种书写形式(3种)
Feb 19 Javascript
js+html+css实现手动轮播和自动轮播
Dec 30 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
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
CSS+JS构建的图片查看器
2006/07/22 Javascript
用jQuery获取IE9下拉框默认值问题探讨
2013/07/22 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
angularjs实现首页轮播图效果
2017/04/14 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
js实现移动端轮播图
2020/12/21 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
详解vue-property-decorator使用手册
2019/07/29 Javascript
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
老生常谈python中的重载
2018/11/11 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
英文版银行求职信
2013/10/09 职场文书
运动会通讯稿400字
2014/01/28 职场文书
设计顾问服务计划书
2014/05/04 职场文书
党代会心得体会
2014/09/04 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
秋季运动会加油词
2015/07/18 职场文书
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers