使用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 相关文章推荐
jQuery初学:find()方法及children方法的区别分析
Jan 31 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
javascript中定义类的方法汇总
Dec 28 Javascript
echarts学习笔记之图表自适应问题详解
Nov 22 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
Mar 12 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
Aug 24 Javascript
vue如何进行动画的封装
Sep 26 Javascript
js实现3D照片墙效果
Oct 28 Javascript
vue data引入本地图片的两种方式小结
Nov 13 Javascript
JavaScript中的执行环境和作用域链
Sep 04 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
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
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
CodeIgniter控制器之业务逻辑实例分析
2016/01/20 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
用js自动判断浏览器分辨率的代码
2007/01/28 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
基于vue.js实现的分页
2018/03/13 Javascript
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
Vue中如何实现proxy代理
2018/04/20 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
[55:56]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
对于Python的框架中一些会话程序的管理
2015/04/20 Python
python 内置模块详解
2019/01/01 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
端午节粽子促销活动方案
2014/02/02 职场文书
安全月活动总结
2014/05/05 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
2015年安全月活动总结
2015/03/26 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP