使用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 相关文章推荐
node.js中的fs.appendFileSync方法使用说明
Dec 17 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
Sep 11 Javascript
javascript中JSON.parse()与eval()解析json的区别
May 19 Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 Javascript
ECMAScript6轮播图实践知识总结
Aug 17 Javascript
JS 拦截全局ajax请求实例解析
Nov 29 Javascript
微信小程序之事件交互操作实例分析
Dec 03 Javascript
@angular前端项目代码优化之构建Api Tree的方法
Dec 24 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
用JS实现选项卡
Mar 23 Javascript
JS继承实现方法及优缺点详解
Sep 02 Javascript
vue中实现弹出层动画效果的示例代码
Sep 25 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简单的会话类代码
2011/08/08 PHP
PHP CURL获取cookies模拟登录的方法
2013/11/04 PHP
php弹出对话框实现重定向代码
2014/01/23 PHP
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
在IE中调用javascript打开Excel的代码(downmoon原作)
2007/04/02 Javascript
预加载css或javascript的js代码
2010/04/23 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
2010/05/22 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
2012/05/10 Javascript
Javascript核心读书有感之词法结构
2015/02/01 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
javascript简易画板开发
2020/04/12 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
详解Js中的模块化是如何实现的
2017/10/18 Javascript
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
ionic2.0双击返回键退出应用
2019/09/17 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
python调试神器PySnooper的使用
2019/07/03 Python
详解anaconda安装步骤
2020/11/23 Python
内刊编辑求职自荐书范文
2014/02/19 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
《当代神农氏》教学反思
2016/02/23 职场文书
导游词之包公祠
2019/11/25 职场文书
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL