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 相关文章推荐
禁止F5等快捷键的JS代码
Mar 06 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
js实现纯前端的图片预览
Apr 27 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
Javascript实现登录记住用户名和密码功能
Mar 22 Javascript
jquery+css实现侧边导航栏效果
Jun 12 jQuery
js实现文字列表无缝滚动效果
Jun 23 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
vue 项目地址去掉 #的方法
Oct 20 Javascript
vuex实现像调用模板方法一样调用Mutations方法
Nov 06 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 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
咖啡豆的最常见发酵处理方法,详细了解一下
2021/03/03 冲泡冲煮
PHP获取163、gmail、126等邮箱联系人地址【已测试2009.10.10】
2009/10/11 PHP
php防盗链的常用方法小结
2010/07/02 PHP
php获得url参数中具有&amp;的值的方法
2014/03/05 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
深入理解PHP内核(一)
2015/11/10 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
2020/03/03 PHP
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
2014/08/18 Javascript
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
2015/12/13 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
js实现点赞效果
2020/03/16 Javascript
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
python进阶教程之词典、字典、dict
2014/08/29 Python
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
基于Python os模块常用命令介绍
2017/11/03 Python
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
2014年实习班主任工作总结
2014/11/08 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python