使用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 stop()方法
Nov 21 Javascript
Sea.JS知识总结
May 05 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
AngularJS中table表格基本操作示例
Oct 10 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
Mar 05 Javascript
vue router+vuex实现首页登录验证判断逻辑
May 17 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
javascript中floor使用方法总结
Feb 02 Javascript
基于Vue和Element-Ui搭建项目的方法
Sep 06 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 Javascript
详解JavaScript 作用域
Jul 14 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
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
PHP缓存集成库phpFastCache用法
2014/12/15 PHP
PHP简单的MVC框架实现方法
2015/12/01 PHP
php 三元运算符实例详细介绍
2016/12/15 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
Js控制滑轮左右滑动实例
2015/02/13 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
微信小程序 wx:for遍历循环使用实例解析
2019/09/09 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
Python读取txt某几列绘图的方法
2018/10/14 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
浅谈anaconda python 版本对应关系
2020/10/07 Python
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
汽车运用工程毕业生自荐信
2013/10/29 职场文书
办公室内勤岗位职责范本
2013/12/09 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
酒店开业策划方案
2014/06/02 职场文书
安全生产宣传标语
2014/06/06 职场文书
学校教研活动总结
2014/07/02 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
在校学生证明格式
2015/06/24 职场文书
读书笔记怎么写
2015/07/01 职场文书
mysql数据库实现设置字段长度
2022/06/10 MySQL