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 相关文章推荐
createElement与createDocumentFragment的点点区别小结
Dec 19 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
JS按字节截取字符长度实例
Nov 20 Javascript
Javascript中的默认参数详解
Oct 22 Javascript
vue分页组件table-pagebar使用实例解析
Nov 15 Javascript
jQuery组件easyui对话框实现代码
Aug 25 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
angular学习之ngRoute路由机制
Apr 12 Javascript
javascript定时器取消定时器及优化方法
Jul 08 Javascript
python实现迭代法求方程组的根过程解析
Nov 25 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
Jul 15 Javascript
微信小程序实现拼图小游戏
Oct 22 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删除HTMl标签的实现代码
2013/06/30 PHP
php比较两个绝对时间的大小
2014/01/31 PHP
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
关于递归运算的顺序测试代码
2011/11/30 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
JS实现的3D拖拽翻页效果代码
2015/10/31 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
vue2.0模拟锚点的实例
2018/03/14 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
微信小程序实现文件预览
2020/10/22 Javascript
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
Python中的两个内置模块介绍
2015/04/05 Python
Python字符串切片操作知识详解
2016/03/28 Python
深入理解NumPy简明教程---数组2
2016/12/17 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
python爬虫 urllib模块反爬虫机制UA详解
2019/08/20 Python
python同步windows和linux文件
2019/08/29 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
python处理excel绘制雷达图
2019/10/18 Python
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
《雨霖铃》听课反思
2014/02/13 职场文书
主办会计岗位职责
2014/03/13 职场文书
学习十八大的心得体会
2014/09/12 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
2014年个人技术工作总结
2014/12/08 职场文书
五年级学生评语大全
2014/12/26 职场文书
三八节活动简报
2015/07/20 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python