使用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 相关文章推荐
javascript 自动填写表单的实现方法
Apr 09 Javascript
Array.prototype 的泛型应用分析
Apr 30 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
Feb 23 Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
分享十五款 jQuery 社交网络分享插件
May 16 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
Nov 15 Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 Javascript
关于微信中a链接无法跳转问题
Aug 02 Javascript
SVG描边动画
Feb 23 Javascript
浅谈vue2 单页面如何设置网页title
Nov 08 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
vue项目实现多语言切换的思路
Sep 17 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
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
PhpMyAdmin中无法导入sql文件的解决办法
2010/01/08 PHP
PHP中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
[02:03]完美世界DOTA2联赛10月30日赛事集锦
2020/10/31 DOTA
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
Python strip lstrip rstrip使用方法
2008/09/06 Python
python登录QQ邮箱发信的实现代码
2013/02/10 Python
Python中的函数作用域
2018/05/07 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
基于python检查矩阵计算结果
2020/05/21 Python
python交互模式基础知识点学习
2020/06/18 Python
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
造价工程师个人求职信
2013/09/21 职场文书
仓库保管员岗位职责
2013/12/20 职场文书
最新个人职业生涯规划书
2014/01/22 职场文书
入党自我评价范文
2014/02/02 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
咖啡店创业计划书
2014/08/15 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书