使用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 相关文章推荐
打开超链需要“确认”对话框的方法
Mar 08 Javascript
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
Jul 12 Javascript
jquery插件之定时查询待处理任务数量
May 01 Javascript
javascript操作数组详解
Dec 17 Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 Javascript
js轮盘抽奖实例分析
Apr 17 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
Dec 13 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
Mar 16 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+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
各种快递查询--Api接口
2016/04/26 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
PHP实现数据四舍五入的方法小结【4种方法】
2019/03/27 PHP
javascript 写类方式之一
2009/07/05 Javascript
js中判断控件是否存在
2010/08/25 Javascript
Javascript获取HTML静态页面参数传递值示例
2013/08/18 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
2017/08/18 Javascript
原生js实现日历效果
2020/03/02 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日
2020/10/31 DOTA
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
妙用itchat! python实现久坐提醒功能
2019/11/25 Python
python如何实现单链表的反转
2020/02/10 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
国际象棋商店:The Chess Store
2018/07/09 全球购物
班会关于环保演讲稿
2013/12/29 职场文书
保送生自荐信范文
2015/03/26 职场文书
2015年团队工作总结范文
2015/05/04 职场文书
离婚律师函范本
2015/05/27 职场文书
2016年教师新年寄语
2015/08/18 职场文书
物业管理交接协议书
2016/03/24 职场文书
创业计划书之美容店
2019/09/16 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书