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 相关文章推荐
支持ie与FireFox的剪切板操作代码
Sep 28 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
Nov 30 Javascript
js 获取经纬度的实现方法
Jun 20 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 Javascript
微信小程序日历组件使用方法详解
Dec 29 Javascript
js实现网页同时进行多个倒计时功能
Feb 25 Javascript
js Array.slice的8种不同用法示例
Jul 10 Javascript
angularjs模态框的使用代码实例
Dec 20 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
php miniBB中文乱码问题解决方法
2008/11/25 PHP
php实现监听事件
2013/11/06 PHP
ThinkPHP实现事务回滚示例代码
2014/06/23 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
2011/01/17 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
2012/01/13 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
javascript 小数取整简单实现方式
2014/05/30 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
Python FTP操作类代码分享
2014/05/13 Python
Python正则表达式匹配ip地址实例
2014/10/09 Python
python print出共轭复数的方法详解
2019/06/25 Python
关于 Python opencv 使用中的 ValueError: too many values to unpack
2019/06/28 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
Python爬虫入门有哪些基础知识点
2020/06/02 Python
详解pytorch tensor和ndarray转换相关总结
2020/09/03 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
Windows和Linux动态库应用异同
2016/07/28 面试题
高中毕业自我鉴定范文
2013/10/02 职场文书
技校教师求职简历的自我评价
2013/10/20 职场文书
中国文明网签名寄语
2014/01/18 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
解决pytorch-gpu 安装失败的记录
2021/05/24 Python
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫