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的简单&amp;简陋Tabs插件代码
Feb 09 Javascript
javascript AOP 实现ajax回调函数使用比较方便
Nov 20 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
May 30 Javascript
JavaScript的漂亮的代码片段
Jun 05 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
vue初尝试--项目结构(推荐)
Jan 30 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
微信小程序实现的日期午别医生排班表功能示例
Jan 09 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
Feb 21 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 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 simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
PHP的PDO预定义常量讲解
2019/01/24 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
PHP中的自动加载操作实现方法详解
2019/08/06 PHP
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
Javascript 去除数组的重复元素
2010/05/04 Javascript
Js获取事件对象代码
2010/08/05 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
css结合js制作下拉菜单示例代码
2014/02/27 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
JavaScript中几种排序算法的简单实现
2015/07/29 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
2016/11/01 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
JS实现的简易拖放效果示例
2016/12/29 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
解析Python中的eval()、exec()及其相关函数
2017/12/20 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
numpy创建单位矩阵和对角矩阵的实例
2019/11/29 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
2014/11/05 HTML / CSS
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
数据库连接池
2021/04/06 MySQL
Python基础之元编程知识总结
2021/05/23 Python
SQL实现LeetCode(178.分数排行)
2021/08/04 MySQL
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python