使用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 AjaxQueue改进步骤
Oct 06 Javascript
js 日期比较相关天数代码
Apr 02 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
jquery中one()方法的用法实例
Jan 16 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
JavaScript 详解预编译原理
Jan 22 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
May 25 Javascript
JS判断微信扫码的方法
Aug 07 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 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中array_merge与array+array的区别
2013/06/21 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
php中stdClass的用法分析
2015/02/27 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
简单谈谈axios中的get,post方法
2017/06/25 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
JS实现的A*寻路算法详解
2018/12/14 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
vue计算属性computed的使用方法示例
2019/03/13 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
python服务器端收发请求的实现代码
2014/09/29 Python
Python编程中对文件和存储器的读写示例
2016/01/25 Python
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
python树的同构学习笔记
2019/09/14 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
用于ETL的Python数据转换工具详解
2020/07/21 Python
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
2013/01/23 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
2013/06/09 HTML / CSS
英国皇室御用百货:福南梅森(Fortnum & Mason)
2017/12/03 全球购物
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
购房意向书范本
2014/04/01 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
小学生家长意见
2015/06/03 职场文书
工伤调解协议书
2016/03/21 职场文书
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
动漫APP软件排行榜前十名,半次元上榜,第一款由腾讯公司推出
2022/03/18 杂记