使用jQuery给input标签设置默认值

由于项目需求,简单地写了一个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>

以上就是本文的全部内容,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2016-06-18

jquery判断input值不为空的方法

<input type="text" class="searchbox" /> <script type='text/javascript'> $(document).ready(function(){ //enter回车键激活搜索 $('.searchbox').bind('keypress', function(event) { if (event.keyCode == "13") { search_news(); }

jQuery获取多种input值的简单实现方法

获取input的checked值是否为true: 第一种: if($("input[name=item][value='val']").attr('checked')==true) //判断是否已经打勾 --注:name即控件name属性,value即控件value属性 第二种: 可以不指定属性值,因一组checkbox的value值都会保存其在数据库中对应的id,最好写成如下方式: if($("input[name=row_checkbox]").attr('ch

jQuery针对input的class属性写了多个值情况下的选择方法

本文实例讲述了jQuery针对input的class属性写了多个值情况下的选择方法.分享给大家供大家参考,具体如下: jQuery选择input的class属性写了多个值的情况: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="jquery-1.6.2.js" ty

jquery获取form表单input元素值的简单实例

一般取值方法 $("#id").val(); $("#id").attr("value"); //其中value是元素的属性名如<s:textfield  id="cifName" key="cifName"   name="#request.consBean.cifName" />的id,key,name属性.取到的值是属性后对应双引号里面的字符. function sav

jQuery获取及设置表单input各种类型值的方法小结

本文实例讲述了jQuery获取及设置input各种类型值的方法.分享给大家供大家参考,具体如下: 获取一组radio被选中项的值 var item = $("input[@name=items]:checked").val(); 获取select被选中项的文本 var item = $("select[@name=items] option[@selected]").text(); select下拉框的第二个元素为当前选中值 $('#select_id')[0].s

jQuery获取和设置表单元素的方法

jQuery提供了val()方法,使用它我们可以快速地获取和设置表单的文本框.单选按钮.以及单选按钮的值.使用val()不带参数,表示获取元素的值使用val()给定参数,则表示把值赋给元素 如下: 复制代码 代码如下: //获取值alert($("input#mytextbox").val());alert($("select#mylist").val());alert($("input#myradio").val()); //设置值$(&quo

jQuery 获取、设置HTML或TEXT内容的两种方法

jQuery提供了两个API可以直接用来为元素添加内容. html() text() 其中html()是为指定的元素添加html内容 text()是为指定的元素添加文本内容 两者的区别在于,text中的内容是纯文本,不会被解析为html 如果要对如下html代码进行操作 复制代码 代码如下: <body> <p></p> </body> 使用html() 复制代码 代码如下: $('p').html('<strong>Hello World<

jquery设置表单元素为不可用的简单代码

本章节通过简单的实例代码介绍一下如何将表单元素设置为不可用状态. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>我们</title> <script type=

Jquery中ajax提交表单几种方法(get、post两种方法)

在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的方法.$get方式提交表单get() 方法通过远程HTTP ,下面我来介绍两个提交表单数据的方法. $get方式提交表单 get() 方法通过远程 HTTP GET 请求载入信息 格式 $(selector).get(url,data,success(response,status,xhr),dataType

jQuery ajax提交Form表单实例(附demo源码)

本文实例讲述了jQuery ajax提交Form表单的方法.分享给大家供大家参考,具体如下: Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法 如Form代码如下: <form id="Form1" action="action.aspx" method="post" > 名称:<input

jQuery基于正则表达式的表单验证功能示例

本文实例讲述了jQuery基于正则表达式的表单验证功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

php获取从html表单传递数组的方法

本文实例讲述了php获取从html表单传递数组的方法.分享给大家供大家参考.具体如下: 将表单的各个元素的name都设置成同一个数组对象既可以以数组的方式传递表单值 html页面如下: <form method="post" action="arrayformdata.php"> <label>Tags</label> <input type="text" name="tags[]"/

jQuery实现form表单基于ajax无刷新提交方法详解

本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o