使用jQuery给input标签设置默认值


Posted in Javascript onJune 20, 2016

由于项目需求,简单地写了一个input默认值设置,实现给.form中所有的input设置默认值的方法。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>input默认值设置</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  //集体调用
  $(".form input").each(function(){
    $(this).setDefauleValue();
  });
  //单个调用
  $("#key").setDefauleValue();
})
 
//设置input,textarea默认值
$.fn.setDefauleValue = function() {
  var defauleValue = $(this).val();
  $(this).val(defauleValue).css("color","#999");
 
  return this.each(function() {   
    $(this).focus(function() {
      if ($(this).val() == defauleValue) {
        $(this).val("").css("color","#000");//输入值的颜色
      }
    }).blur(function() {
      if ($(this).val() == "") {
        $(this).val(defauleValue).css("color","#999");//默认值的颜色
      }
    });
  });
}
</script>
</head>
 
<body>
<form class="form">
 <input type="text" size="30" value="输入昵称">
 <br>
 <input type="text" size="30" value="输入姓名">
</form>
<br>
<br>
<br>
<input type="text" size="30" id="key" value="输入学员ID、姓名、昵称进行查找">
</body>
</html>

以上就是本文的全部内容,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 Javascript
javascript常用对话框小集
Sep 13 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
Feb 25 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
javascript数据结构之串的概念与用法分析
Apr 12 Javascript
Vue.js项目部署到服务器的详细步骤
Jul 17 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
微信小程序实现上传图片功能
May 28 Javascript
iView框架问题整理小结
Oct 16 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
Jan 19 Javascript
js中获取时间new Date()的全面介绍
Jun 20 #Javascript
AngularJs Javascript MVC 框架
Jun 20 #Javascript
jQuery 限制输入字符串长度
Jun 20 #Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 #Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 #Javascript
jquery通过name属性取值的简单实现方法
Jun 20 #Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 #Javascript
You might like
聊天室php&amp;mysql(四)
2006/10/09 PHP
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
PHP关联链接常用代码
2012/11/05 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
用PHP代替JS玩转DOM的思路及示例代码
2014/06/15 PHP
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
jquery等待效果示例
2014/05/01 Javascript
jquery动态添加删除一行数据示例
2014/06/12 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
python paramiko模块学习分享
2017/08/23 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
好的Python培训机构应该具备哪些条件
2018/05/23 Python
python爬虫获取百度首页内容教学
2018/12/23 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
Pytorch 实现自定义参数层的例子
2019/08/17 Python
python实现简单的购物程序代码实例
2020/03/03 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
python 使用while循环输出*组成的菱形实例
2020/04/12 Python
python怎么提高计算速度
2020/06/11 Python
一款纯css3实现的tab选项卡的实列教程
2014/12/11 HTML / CSS
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
英国知名奢侈品包包品牌:Milli Millu
2016/12/22 全球购物
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
伦敦剧院门票:From The Box Office
2018/06/30 全球购物
南京某公司笔试题
2013/01/27 面试题
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上?
2013/03/30 面试题
社区文化建设方案
2014/05/02 职场文书
应届生找工作求职信
2014/06/24 职场文书
材料员岗位职责范本
2015/04/11 职场文书
团组织推荐意见
2015/06/05 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书
python如何在word中存储本地图片
2021/04/07 Python