使用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简化JavaScript开发分析
Feb 19 Javascript
Javascript 面向对象 命名空间
May 13 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
jquery实现全选、不选、反选的两种方法
Sep 06 Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 Javascript
源码分析Vue.js的监听实现教程
Apr 23 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
vue.js的computed,filter,get,set的用法及区别详解
Mar 08 Javascript
vue-cli V3.0版本的使用详解
Oct 24 Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 Javascript
Vue实现数据请求拦截
Oct 23 Javascript
微信小程序日历插件代码实例
Dec 04 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学习笔记汇总
2014/10/05 PHP
PHP实现WebService的简单示例和实现步骤
2015/03/27 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
JS实现回到页面顶部动画效果的简单实例
2016/05/24 Javascript
jQuery解决$符号命名冲突
2016/06/18 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
python基础教程之字典操作详解
2014/03/25 Python
Python通过解析网页实现看报程序的方法
2014/08/04 Python
python删除过期log文件操作实例解析
2018/01/31 Python
Python OpenCV 直方图的计算与显示的方法示例
2018/02/08 Python
python模仿网页版微信发送消息功能
2018/02/24 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
python获取Linux发行版名称
2019/08/30 Python
python 控制台单行刷新,多行刷新实例
2020/02/19 Python
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
产品开发计划书
2014/04/27 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python
Redis实现主从复制方式(Master&Slave)
2022/06/21 Redis