使用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 相关文章推荐
javascript Excel操作知识点
Apr 24 Javascript
Prototype Hash对象 学习
Jul 19 Javascript
javascript setTimeout和setInterval 的区别
Dec 08 Javascript
关于递归运算的顺序测试代码
Nov 30 Javascript
详解Javascript动态操作CSS
Dec 08 Javascript
jQuery验证元素是否为空的两种常用方法
Mar 17 Javascript
JQuery记住用户名密码实现下次自动登录功能
Apr 27 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
Aug 05 Javascript
jQuery插件扩展实例【添加回调函数】
Nov 26 Javascript
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
解决JavaScript layui 下拉框不显示的问题
Aug 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
PHP中常用的输出函数总结
2014/09/22 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
firefo xml 读写实现js代码
2009/06/11 Javascript
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
2013/04/03 Javascript
JS 在指定数组中随机取出N个不重复的数据
2014/06/10 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
谈一谈javascript闭包
2016/01/28 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
AngularJs实现分页功能不带省略号的代码
2016/05/30 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
React中上传图片到七牛的示例代码
2017/10/10 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
js面试题之异步问题的深入理解
2020/09/20 Javascript
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
Python魔法方法功能与用法简介
2019/04/04 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
python如何求圆的面积
2020/07/01 Python
python 线程的五个状态
2020/09/22 Python
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
video实现有声音自动播放的实现方法
2020/05/20 HTML / CSS
美国女士泳装店:Swimsuits For All
2017/03/02 全球购物
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
后勤个人工作总结
2015/02/28 职场文书