使用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 相关文章推荐
Div自动滚动到末尾的代码
Oct 26 Javascript
浅析jquery某一元素重复绑定的问题
Jan 03 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
Mar 28 Javascript
jQuery动态添加
Apr 07 Javascript
BootStrap中Table分页插件使用详解
Oct 09 Javascript
JavaScript实现封闭区域布尔运算的示例代码
Jun 25 Javascript
vue js秒转天数小时分钟秒的实例代码
Aug 08 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 Javascript
JavaScript闭包原理与用法学习笔记
May 29 Javascript
JavaScript中的执行环境和作用域链
Sep 04 Javascript
微信小程序自定义底部弹出框动画
Nov 18 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中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
2010/09/28 Javascript
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
2017/01/17 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
2018/02/03 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
js回文数的4种判断方法示例
2019/06/04 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
jQuery实现带进度条的轮播图
2020/09/13 jQuery
[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13
2020/12/17 DOTA
详解详解Python中writelines()方法的使用
2015/05/25 Python
python实现桌面壁纸切换功能
2019/01/21 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
解决Pycharm后台indexing导致不能run的问题
2019/06/27 Python
python cumsum函数的具体使用
2019/07/29 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
2020/05/09 Python
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
How to spawning asynchronous work in J2EE
2016/08/29 面试题
初中校园广播稿
2014/02/02 职场文书
开展党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
HTML基础详解(下)
2021/10/16 HTML / CSS
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android
MySQL数据库查询之多表查询总结
2022/08/05 MySQL