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 aminate方法定位到页面具体位置
Dec 26 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
详解Vue.js动态绑定class
Dec 20 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
get  post jsonp三种数据交互形式实例详解
Aug 25 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
Apr 29 Javascript
微信小程序点击保存图片到本机功能
Dec 13 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 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
JavaScript 学习笔记(九)call和apply方法
2010/01/11 Javascript
js弹出层之1:JQuery.Boxy (二)
2011/10/06 Javascript
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
js获取元素外链样式的方法
2015/01/27 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
JS实现简单的星期格式转换功能示例
2018/07/23 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
深入学习JavaScript 高阶函数
2019/06/11 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
Python、Javascript中的闭包比较
2015/02/04 Python
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
Python 循环语句之 while,for语句详解
2018/04/23 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
2019/09/11 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
中学老师的自我评价
2013/11/07 职场文书
行政助理岗位职责
2013/11/10 职场文书
最新创业融资计划书
2014/01/19 职场文书
酒店管理求职信范文
2014/04/06 职场文书
培训研修方案
2014/06/06 职场文书
医疗专业毕业生求职信
2014/08/28 职场文书
学习十八大的心得体会
2014/09/01 职场文书
2014年保洁工作总结
2014/11/24 职场文书
2015年劳动部工作总结
2015/05/23 职场文书