使用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多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
js 一个关于图片onload加载的事
Nov 10 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
Jan 09 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
浅谈JS函数定义方式的区别
Oct 30 Javascript
jquery validation验证表单插件
Jan 07 Javascript
微信小程序 扎金花简单实例
Feb 21 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
JS常用正则表达式总结【经典】
May 12 Javascript
浅析node应用的timing-attack安全漏洞
Feb 28 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
Dec 12 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
深入了解php4(1)--回到未来
2006/10/09 PHP
PHP 单引号与双引号的区别
2009/11/24 PHP
PHP is_dir() 判断给定文件名是否是一个目录
2010/05/10 PHP
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
PHP+MySQL实现输入页码跳转到指定页面功能示例
2018/06/01 PHP
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
jQuery的bind()方法使用详解
2015/07/15 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
vue生成token并保存到本地存储中
2018/07/17 Javascript
vue中将html字符串转换成html后遇到的问题小结
2018/12/10 Javascript
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
vue中input的v-model清空操作
2019/09/06 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
简介二分查找算法与相关的Python实现示例
2015/08/26 Python
Python二元赋值实用技巧解析
2019/10/25 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
软件测试面试题
2015/10/21 面试题
护士演讲稿范文
2014/01/05 职场文书
大学班级计划书
2014/04/29 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
教学改革问题查摆整改措施
2014/09/27 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
保证书格式
2015/01/16 职场文书
2019个人工作自我评价范文(3篇)
2019/09/19 职场文书
如何利用Python实现一个论文降重工具
2021/07/09 Python