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 相关文章推荐
IE6浏览器下resize事件被执行了多次解决方法
Dec 11 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
JS去除数组重复值的五种不同方法
Sep 06 Javascript
jquery使用append(content)方法注意事项分享
Jan 06 Javascript
基于jQuery的图片不完全按比例自动缩小
Jul 11 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
May 15 Javascript
微信小程序 扎金花简单实例
Feb 21 Javascript
微信小程序 支付后台java实现实例
May 09 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 Javascript
微信小程序自定义tabBar的踩坑实践记录
Nov 06 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读取IMAP邮件
2006/10/09 PHP
php去除HTML标签实例
2013/11/06 PHP
php实现在多维数组中查找特定value的方法
2015/07/29 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
javascript实现数字验证码的简单实例
2014/02/10 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
Vue实现拖放排序功能的实例代码
2019/07/08 Javascript
vue element upload实现图片本地预览
2019/08/20 Javascript
基于vue-cli3创建libs库的实现方法
2019/12/04 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
2020/02/14 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
python——全排列数的生成方式
2020/02/26 Python
python实现坦克大战
2020/04/24 Python
ECCO爱步官方旗舰店:丹麦鞋履品牌
2018/01/02 全球购物
以色列的身体护理及家居香薰品牌:Sabon NYC
2018/02/23 全球购物
意大利自行车商店:Cingolani Bike Shop
2019/09/03 全球购物
社区安全生产月活动总结
2014/07/05 职场文书
司机岗位职责说明书
2014/07/29 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
高三复习计划
2015/01/19 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL