首页 > 代码库 > jQuery整理笔记七----几个经典表单应用
jQuery整理笔记七----几个经典表单应用
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=http://www.mamicode.com/"jquery-2.1.0.min.js" type="text/javascript"></script>>效果图：
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=http://www.mamicode.com/"jquery-2.1.0.min.js" type="text/javascript"></script>>
望长城内外。惟余莽莽；大河上下，顿失滔滔。
山舞银蛇，原驱蜡象，欲与天公试比高。
须晴日，看红装素裹，分外妖娆。
江山如此多娇。引无数英雄竞折腰。
惜秦皇汉武，略输文採；唐宗宋祖，稍逊风骚。
一代天骄。成吉思汗，仅仅识弯弓射大雕。
俱往矣。数风流人物，还看今朝。
</textarea>
</body>
</html>
效果图：
我们最初设置的<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=http://www.mamicode.com/"jquery-2.1.0.min.js" type="text/javascript"></script>>除了能够限定输入长度外，还能够通过autotab_filter()方法限定输入的字符类型，这种方法还能过滤大写、小写、空格、字母等。详细的用到了现查吧。
假设将上面的js改成：
$(function(){
$(‘#autotab‘).submit(function(){
return false;
});
$(‘#autotab :input‘).autotab_magic().autotab_filter(‘numeric‘);
})就是仅仅能输入数字了。4、passwordStrength密码强度指标
passwordStrength插件可以依据用户输入的password,以图形化方式显示password的强度。
<!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=http://www.mamicode.com/"css/style.css" rel="stylesheet" type="text/css" media="all" />>上例用到一个图片：
运行效果图：
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=http://www.mamicode.com/"jquery-2.1.0.min.js" type="text/javascript"></script>>效果图：
6、checkbox复选框(全选反选等操作)
曾经经经常使用。不说了。
7、下拉框的应用
这回先看个图：
大家肯定都见过类似效果的网页，怎么实现的呢,代码非常easy：
<!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=http://www.mamicode.com/"jquery-2.1.0.min.js" type="text/javascript"></script>>代码实现的功能：
1)、将选中的选项加入给对方
2)、将所有选项加入给对方
3)、双击某个选项将其加入给对方
jQuery整理笔记七----几个经典表单应用