使用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 $.data()方法使用注意细节
Dec 31 Javascript
jquery中的on方法使用介绍
Dec 29 Javascript
JS中Location使用详解
May 12 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
vue mounted 调用两次的完美解决办法
Oct 29 Javascript
JavaScript闭包与作用域链实例分析
Jan 21 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
vue设计一个倒计时秒杀的组件详解
Apr 06 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
Apr 10 Javascript
微信小程序实现录音功能
Nov 22 Javascript
vue通过过滤器实现数据格式化
Jul 20 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实现批量修改文件后缀名的方法
2015/07/30 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
深入浅析PHP无限极分类的案例教程
2016/05/09 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
6个DIV 135或246间隔一秒轮番显示效果
2010/07/24 Javascript
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
vue3.0中使用element的完整步骤
2021/03/04 Vue.js
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
Python判断Abundant Number的方法
2015/06/15 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
秦兵马俑教学反思
2014/02/07 职场文书
销售主管岗位职责
2014/02/08 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
同事打架检讨书
2015/05/06 职场文书
青年教师听课心得体会
2016/01/15 职场文书
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python