jQuery----经典表单应用

1、文本框获得/失去焦点

<style type="text/css">

.focus {

border: 1px solid #f00;

background: #fcc;

}

</style>

<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>

<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>

2、Elastic弹性文本域

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

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

<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>

3、Autotab自动Tab文本框

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

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

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

<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改成：

<span style="font-family:SimSun;font-size:12px;">$(function(){

$('#autotab').submit(function(){

return false;

});

$('#autotab :input').autotab_magic().autotab_filter('numeric');

})</span>

就是只能输入数字了。

4、passwordStrength密码强度指标

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

<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>

5、formToWizard表单填充向导

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

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

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

100

<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>

</form>

</body>

</html>

6、下拉框的应用

<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>

<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 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>

</body>

</html>

代码实现的功能：

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

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

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

jQuery----经典表单应用相关推荐

jQuery 经典表单应用
文章来源:http://www.itnose.net/detail/6034120.html 更多文章:http://www.itnose.net/type/111.html 1.文本框获得(失去)焦 ...
实战课【1】jQuery实现表单校验及布局
实战课[1]jQuery实现表单校验及布局在学习完html,css,js,mysql,jdbc,Servlet,filter,ajax,maven等web基础知识后,开始进行项目实战.此文就会记录在 ...
整理的16个有用的jQuery Form(表单)验证教程
表单在每个网站开发者必不可少的组成部份,而最烦繁的也是表单验证部份,借助于jQuery一些现有成熟的插件,可以大大减少我们的开发工作量以及减少很多重复出现的问题 ,这篇文章将整理出非常好的16篇非常有 ...
使用jQuery提交表单
我想使用jQuery提交表单. 有人可以提供代码,演示或示例链接吗? #1楼来自手册: jQuery Doc $("form:first").submit(); #2楼您将必须 ...
jQuery formValidator表单校验代码生成器ver1.0
发表感言很感谢一直在支持我的网友们,感谢你们对插件改进的建议.虽然最近坐的脖子和屁股痛,但是我还是用休息时间完成了这个代码生成器的开发,再次感谢支持我的网友们. 谈一下写代码生成器的目的 ...
基于jQuery的表单验证插件：jValidate
网上基于jQuery的表单验证插件已有很多,但是这个轮子我还是继续做一个,因为这个表单验证插件是从我以前的个人JS框架移值过来的(我已慢慢投入jQuery的怀抱),并且它的验证规则书写方式也许会让你眼 ...
Jquery ValidateEngine表单验证
Jquery ValidateEngine表单验证用法:http://www.position-relative.net/creation/formValidator/demoValidators. ...
html中表单的校验的插件,功能强大的jquery.validate表单验证插件
本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助 ...
jQuery 去除表单空值 serialize how to eliminate empty fields
1. Try adding this $('input', '#submForm').each(function(){$(this).val() == "" && ...
使用 jQuery Mobile 与 HTML5 开发 Web App (五) —— jQuery Mobile 表单下
在上文<使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 表单上>中, Kayo 介绍了一部分 jQuery Mobile 表单组件 ...

jQuery----经典表单应用

jQuery----经典表单应用相关推荐

最新文章

热门文章