使用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数据显示插件整合实现代码
Oct 24 Javascript
页面调用单个swf文件,嵌套出多个方法。
Nov 21 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
Apr 05 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
Jan 25 Javascript
JQuery validate插件Remote用法大全
May 15 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
React中jquery引用的实现方法
Sep 12 jQuery
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 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/09/24 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
2015/03/01 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
js实现简单抽奖功能
2020/11/24 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
Python中的descriptor描述器简明使用指南
2016/06/02 Python
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
python+opencv实现阈值分割
2018/12/26 Python
python实现的按要求生成手机号功能示例
2019/10/08 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
python 如何调用 dubbo 接口
2020/09/24 Python
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
酒店秘书求职信范文
2014/02/17 职场文书
母亲节感恩寄语
2014/02/21 职场文书
布达拉宫导游词
2015/02/02 职场文书
归途列车观后感
2015/06/17 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书