`

jQuery 经典表单应用

jquery 
阅读更多

文章来源：http://www.itnose.net/detail/6034120.html
更多文章：http://www.itnose.net/type/111.html

1、文本框获得(失去)焦点

当文本框获得输入焦点时,将该文本框高亮显示，算不得一个应用，只是一个小技巧，可以提高用户体验。

 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body{
	font:normal 12px/17px Arial;
}
div{
    padding:2px;
} 
input, textarea { 
	 width: 12em; 
	 border: 1px solid #888;
}
.focus { 
	 border: 1px solid #f00;
	 background: #fcc;
} 
</style>
<!--   引入jQuery -->
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function(){
		$(":input").focus(function(){
			  $(this).addClass("focus");
			  if($(this).val() ==this.defaultValue){  
                  $(this).val("");           
			  } 
		}).blur(function(){
			 $(this).removeClass("focus");
			 if ($(this).val() == '') {
                $(this).val(this.defaultValue);
             }
		});
    })
    </script>
</head>
<body>
	<form action="" method="post" id="regForm">
		<fieldset>
			<legend>个人基本信息</legend>
				<div>
					<label  for="username">名称:</label>
					<input id="username" type="text" value="名称" />
				</div>
                <div>
					<label for="pass">密码:</label>
					<input id="pass" type="password" value="密码" />
				</div>
                <div>
					<label for="msg">详细信息:</label>
					<textarea id="msg" rows="2" cols="20">详细信息</textarea>
				</div>
		</fieldset>
	</form>
</body>
</html>

效果图：

 

jquery,经典,几个,笔记,表单0

2、Elastic弹性文本域

Elastic是一款功能专一的表单插件，他可以控制页面内表单域(<textarea>)标签高度自动伸缩，以适应包含的文本。应用这个插件的时候页面需要引入jquery.elastic.source.js。

插件下载地址：点击进入下载页面

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>
  <script src="jquery.elastic.source.js" type="text/javascript" ></script>
  <script type="text/javascript">
	//页面加载方法
	$(function(){
		$("textarea").elastic();//应用弹性文本框
	})
  </script>
 </head>

 <body>
	<textarea name="" rows="2" cols="43">
	沁园春·雪
北国风光，千里冰封，万里雪飘。

望长城内外，惟余莽莽；大河上下，顿失滔滔。

山舞银蛇，原驱蜡象，欲与天公试比高。

须晴日，看红装素裹，分外妖娆。

江山如此多娇，引无数英雄竞折腰。

惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。

一代天骄，成吉思汗，只识弯弓射大雕。

俱往矣，数风流人物，还看今朝。
	</textarea>
 </body>
</html>

效果图：

 

jquery,经典,几个,笔记,表单1

我们最初设置的<textarea>标签的rows属性值为2 ,随着文本内容的增多高度会自动增加，当然了，随着内容的减少也可以高度降低的。

3、Autotab自动Tab文本框

Autotab也是一款功能专一的表单插件，它提供了自动跳格的功能，当用户输入的字符数一旦超过已定义的最大长度，则会根据事先设置的目标自动跳转到相应元素上，省却了

用户按【Tab】键的麻烦。最典型的应用就是输入IP地址、软件激活码等地方了，我们做的web项目中也有很多地方可以用到这插件，对于提高用户体验还是很有帮助的。

使用时需要引入jquery.autotab.js,下载地址：点击进入下载页面

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>
  <script  src="jquery.autotab.js" type="text/javascript"></script>
  <script type="text/javascript">
	//页面加载方法
	$(function(){
		$('#autotab').submit(function(){
			return false;
		})
		$('#autotab :input').autotab_magic();//为页面文本框绑定autotab插件
	})
  </script>
 </head>

 <body>
	<h1>jQuery整理笔记七</h1>
	<h2>Autotab自动Tab文本框</h2>
	<form method="post" action=""  id="autotab">
		<label>请输入验证码：
		<input type="text" name="num1" id="num1" maxlength="3"  size="3">
		<input type="text" name="num2" id="num2" maxlength="3"  size="3">
		<input type="text" name="num3" id="num3" maxlength="3"  size="3">
		<input type="text" name="num4" id="num4" maxlength="3"  size="3">
		<input type="text" name="num5" id="num5" maxlength="3"  size="3">
		<input type="text" name="num6" id="num6" maxlength="3"  size="3">
	</form>
 </body>
</html>

除了可以限定输入长度外，还可以通过autotab_filter()方法限定输入的字符类型，这个方法还能过滤大写、小写、空格、字母等，具体的用到了现查吧。 

 

如果将上面的js改成：

 

$(function(){
	$('#autotab').submit(function(){
		return false;
	});
	$('#autotab :input').autotab_magic().autotab_filter('numeric');
})
就是只能输入数字了。

 

4、passwordStrength密码强度指标

passwordStrength插件能够根据用户输入的密码,以图形化方式显示密码的强度。

 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>passwordStrength</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="passwordStrength.js"></script>
<script type="text/javascript">
$(function(){
	$('input[name="password"]').passwordStrength();
})
</script>
<style type="text/css">
.is0{background:url(images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;margin:10px 0 0 104px;}
.is10{background-position:0 -7px;}
.is20{background-position:0 -14px;}
.is30{background-position:0 -21px;}
.is40{background-position:0 -28px;}
.is50{background-position:0 -35px;}
.is60{background-position:0 -42px;}
.is70{background-position:0 -49px;}
.is80{background-position:0 -56px;}
.is90{background-position:0 -63px;}
.is100{background-position:0 -70px;}
 
#autotab input { width:138px; }
</style>
</head>
<body>
<h1>jQuery整理笔记七</h1>
<h2>表单开发（Forms）</h2>
<hr />
<h3>passwordStrength密码强度指标</h3>
<form action="" method="post" id="autotab" class="p1">
    <label>请输入密码：
    	<input type="password" name="password" />
        <div id="passwordStrengthDiv" class="is0"></div>
    </label>
</form>
</body>
</html>
上例用到一个图片：

 

jquery,经典,几个,笔记,表单2

执行效果图：

jquery,经典,几个,笔记,表单3

5、formToWizard表单填充向导

这个是什么意思呢？其实我们实际见的也很多，有很多网站填写注册信息的时候是分步进行的，比方说，先填写个人信息，然后再填写工作信息...然后一起提交。这就避免了庞

大的信息量都在一个页面上进行填写。

formToWizard就是解决这个问题的一个小插件，插件下载地址:点击进入下载页面

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
	  <title> New Document </title>
	  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>
	  <script type="text/javascript" src="formToWizard.js"></script>
	  <script type="text/javascript">
		//页面加载方法
		$(function(){
			$("#form1").formToWizard({ submitButton: 'SaveAccount' })
		})
	  </script>
	  <style type="text/css">
		#wrap { margin:1em 4em; font-size:12px; padding:1em 1em; border:solid 1px #fff; }
		fieldset { border:none; width:320px; }
		legend { font-size:18px; margin:0px; padding:10px 0px; color:#b0232a; font-weight:bold; }
		label { display:block; margin:15px 0 5px; }
		input[type=text], input[type=password] { width:300px; padding:5px; border:solid 1px #000; }
		.prev, .next { background-color:#b0232a; padding:5px 10px; color:#fff; text-decoration:none; }
		.prev:hover, .next:hover { background-color:#000; text-decoration:none; }
		.prev { float:left; }
		.next { float:right; }
		#steps { list-style:none; width:100%; overflow:hidden; margin:0px; padding:0px; }
		#steps li { font-size:24px; float:left; padding:10px; color:#b0b1b3; }
		#steps li span { font-size:11px; display:block; }
		#steps li.current { color:#000; }
		#makeWizard { background-color:#b0232a; color:#fff; padding:5px 10px; text-decoration:none; font-size:18px; }
		#makeWizard:hover { background-color:#000; }
	  </style>
 </head>

 <body>
 <div id="wrap">
      <form id="form1" action="">
        <fieldset>
            <legend>登录信息</legend>
            <label for="Name">昵称</label>
            <input id="Name" type="text" />
            <label for="Email">Email</label>
            <input id="Email" type="text" />
            <label for="Password">密码</label>
            <input id="Password" type="password" />
        </fieldset>
        <fieldset>
            <legend>公司信息</legend>
            <label for="CompanyName">公司名称</label>
            <input id="CompanyName" type="text" />
            <label for="Website">公司网址</label>
            <input id="Website" type="text" />
            <label for="CompanyEmail">公司邮箱</label>
            <input id="CompanyEmail" type="text" />
        </fieldset>
        <fieldset>
            <legend>个人信息</legend>
            <label for="NameOnCard">真实姓名</label>
            <input id="NameOnCard" type="text" />
            <label for="CardNumber">身份证号</label>
            <input id="CardNumber" type="text" />
            <label for="CreditcardMonth">发卡日期</label>
            <select id="CreditcardMonth">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
            </select>
            <select id="CreditcardYear">
                <option value="2009">2009</option>
                <option value="2010">2010</option>
                <option value="2011">2011</option>
            </select>
            <label for="Address1">地址1</label>
            <input id="Address1" type="text" />
            <label for="Address2">地址2</label>
            <input id="Address2" type="text" />
            <label for="City">城市</label>
            <input id="City" type="text" />
            <label for="Country">国家</label>
            <select id="Country">
                <option value="CA">Canada</option>
                <option value="US">United States of America</option>
                <option value="GB">United Kingdom (Great Britain)</option>
                <option value="AU">Australia</option>
                <option value="JP">Japan</option>
            </select>
        </fieldset>
        <div>
            <input id="SaveAccount" type="button" value="提交表单" />
        </div>
		</div>
    </form>
 </body>
</html>

效果图：

 

jquery,经典,几个,笔记,表单4jquery,经典,几个,笔记,表单5

jquery,经典,几个,笔记,表单6

6、checkbox复选框(全选反选等操作)

以前经常用，不说了。

7、下拉框的应用

这回先看个图：

jquery,经典,几个,笔记,表单7

大家肯定都见过类似效果的网页，怎么实现的呢,代码很简单：

 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* { margin:0; padding:0; }
div.centent {
   float:left;
   text-align: center;
   margin: 10px;
}
span { 
	display:block; 
	margin:2px 2px;
	padding:4px 10px; 
	background:#898989;
	cursor:pointer;
	font-size:12px;
	color:white;
}
</style>
<!--   引入jQuery -->
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	//移到右边
	$('#add').click(function() {
	//获取选中的选项，删除并追加给对方
		$('#select1 option:selected').appendTo('#select2');
	});
	//移到左边
	$('#remove').click(function() {
		$('#select2 option:selected').appendTo('#select1');
	});
	//全部移到右边
	$('#add_all').click(function() {
		//获取全部的选项,删除并追加给对方
		$('#select1 option').appendTo('#select2');
	});
	//全部移到左边
	$('#remove_all').click(function() {
		$('#select2 option').appendTo('#select1');
	});
	//双击选项
	$('#select1').dblclick(function(){ //绑定双击事件
		//获取全部的选项,删除并追加给对方
		$("option:selected",this).appendTo('#select2'); //追加给对方
	});
	//双击选项
	$('#select2').dblclick(function(){
	   $("option:selected",this).appendTo('#select1');
	});
});
</script>

</head>
<body>
	<div class="centent">
		<select multiple="multiple" id="select1" style="width:100px;height:160px;">
			<option value="1">曹操</option>
			<option value="2">曹昂</option>
			<option value="3">曹丕</option>
			<option value="4">曹彰</option>
			<option value="5">曹植</option>
			<option value="6">曹熊</option>
			<option value="7">曹仁</option>
			<option value="8">曹洪</option>
			<option value="9">曹休</option>
			<option value="10">曹真</option>
			<option value="11">曹爽</option>
		</select>
		<div>
			<span id="add" >选中添加到右边>></span>
			<span id="add_all" >全部添加到右边>></span>
		</div>
	</div>
	<div class="centent">
		<select multiple="multiple" id="select2" style="width: 100px;height:160px;">
			<option value="12">曹芳</option>
		</select>
		<div>
			<span id="remove"><<选中删除到左边</span>
			<span id="remove_all"><<全部删除到左边</span>
		</div>
	</div>
</body>
</html>

代码实现的功能：

 

1)、将选中的选项添加给对方

2)、将全部选项添加给对方

3)、双击某个选项将其添加给对方

 

分享到：
| Linux中查看进程占用内存和系统资源情况的 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery表单验证插件

    ### jQuery表单验证插件详解 #### 一、概述 jQuery表单验证插件是一种用于简化Web表单处理过程的强大工具。它不仅能够帮助开发者轻松地实现表单数据的Ajax提交，还支持文件上传等功能，极大地提升了用户体验并降低...

    jquery UI表单设计器

    **jQuery UI表单设计器**是基于流行的JavaScript库jQuery和其UI框架开发的一款工具，用于帮助开发者快速、...同时，通过研究源代码，开发者可以学习到jQuery和jQuery UI的实战应用，以及前端表单设计和管理的最佳实践。

    JQuery实现表单验证

    在Web开发中，表单验证是一项至关重要的任务，它确保用户输入的数据符合应用程序的要求和预期。JQuery，一个流行的JavaScript库，提供了强大的功能来简化这一过程。本篇将深入探讨如何利用JQuery实现表单验证，特别...

    jquery操作表单案例

    通过学习和理解这些案例，你可以更好地掌握jQuery在实际表单操作中的应用，提高网页交互的用户体验。 总结，jQuery提供了一套强大且易用的API来处理HTML表单元素，无论是在获取、设置值，还是在处理复选框和单选...

    jquery validate 表单验证

    2. **初始化验证**：在文档加载完成后，对表单元素应用验证规则，通常使用`$("#formId").validate()`。 3. **设置规则**：为表单字段设置验证规则，这可以通过`rules`属性完成，如`$("#inputId").rules("add", { ...

    jQuery表单验证大全

    本文将深入探讨jQuery表单验证的相关知识点，帮助开发者更好地理解和应用这一功能。 1. **jQuery Validate插件** jQuery Validate插件是jQuery的一个扩展，专门用于处理HTML表单的验证。它提供了一套完整的验证...

    表单验证jquery插件

    jQuery Validation Engine 是一个功能强大的表单验证插件，以其简单易用和丰富的自定义选项而受到开发者的青睐。 ## 1. jQuery Validation Engine 插件简介 jQuery Validation Engine 是一款基于 jQuery 库的验证...

    jquery动态表单

    动态表单是Web开发中的一个重要概念，尤其是在需要用户输入不确定数量数据或根据用户行为改变表单结构的应用中。jQuery的动态表单功能使得开发者能够轻松实现这些需求。下面，我们将详细讨论如何利用jQuery实现动态...

    jquery聚焦表单高亮.zip

    5. **兼容性处理**：尽管jQuery已经处理了很多浏览器兼容性问题，但在实际应用中，我们仍需关注不同浏览器对CSS属性和事件支持的差异。例如，某些老版本的IE可能不支持某些CSS3属性，我们需要提供备选方案。 6. **...

    jquery表单验证特效

    "jquery表单验证特效"这个主题涉及到使用jQuery进行表单验证，这是一种提高用户体验的有效方式，通过实时验证用户输入的数据，确保其正确性和完整性，避免提交无效或错误的信息。 表单验证通常是网页应用程序不可或...

    Jquery超强验证表单

    jQuery表单验证插件** jQuery有许多优秀的表单验证插件，例如jQuery Validation Plugin。这个插件提供了丰富的验证规则和自定义错误消息功能。通过简单的配置，可以实现各种复杂的验证需求。 **4. 验证规则** - **...

    jQuery应用

    本篇文章将深入探讨jQuery在表单应用中的核心知识点，旨在帮助你轻松掌握并深化对jQuery的理解。 一、jQuery选择器 jQuery的选择器是其强大的功能之一，它们基于CSS选择器，让你能够方便地选取页面上的元素。例如，...

    jquery form表单美化插件

    今天我们将深入探讨的是一个关于jQuery的实用工具——"jquery form表单美化插件"。这个插件专门用于提升网页表单的用户体验和视觉效果，使原本平淡无奇的HTML表单变得更具吸引力。 首先，我们要理解jQuery Form插件...

    jquery-form - jQuery表单生成插件

    在jQuery-form中，你可以轻松实现异步（Ajax）提交表单，避免页面刷新，提升用户体验。它支持多种HTTP方法，包括POST和GET，以及XMLHttpRequest Level 2的PUT、DELETE等。此外，它还兼容各种表单编码类型，如...

    jquery form 表单验证神器

    **jQuery Form 表单验证神器** 是一个专为HTML表单设计的强大验证插件，它极大地简化了前端数据验证的过程，使得开发者能够更专注于用户体验和交互设计，而不是繁琐的验证逻辑。这个插件以其易用性和灵活性而备受...

    Jquery表单验证特效示例

    1. **基本概念**：jQuery表单验证的核心是通过监听用户的交互行为，如表单提交或输入字段失去焦点时，检查输入数据是否符合预设规则。这些规则可能包括必填项、邮箱格式、手机号码格式等。 2. **jQuery验证插件**：...

    jquery validate表单验证插件手机注册表单验证代码

    jQuery Validate插件作为一款强大的JavaScript验证工具，广泛应用于各种表单验证场景，包括手机注册表单验证。本文将深入探讨jQuery Validate插件的使用方法，以及如何将其应用于手机注册表单的验证。 一、jQuery ...

    jquery高级注册表单.zip

    这个主题主要涉及JavaScript库jQuery的高级应用，特别是与HTML表单和按钮相关的交互效果。在网页开发中，表单是收集用户信息的重要工具，而jQuery能够极大地提升表单的用户体验，使操作更流畅、反馈更及时。 首先，...

    初探jquery——表单应用范例

    ### 初探jQuery——表单应用范例 #### 一、引言 随着Web开发技术的不断进步，jQuery作为一种轻量级的JavaScript库，在前端开发领域占据着举足轻重的地位。它简化了许多复杂的DOM操作，并提供了丰富的插件支持，...

Magicbox
Global site tag (gtag.js) - Google Analytics