jQuery几个经典表单应用整理回顾

简介: 1、文本框获得(失去)焦点 当文本框获得输入焦点时,将该文本框高亮显示,算不得一个应用,只是一个小技巧,可以提高用户体验。 [html] view plaincopy      ...

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

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

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <span style="font-family:SimSun;font-size:12px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title></title>  
  6. <style type="text/css">  
  7. body{  
  8.     font:normal 12px/17px Arial;  
  9. }  
  10. div{  
  11.     padding:2px;  
  12. }   
  13. input, textarea {   
  14.      width: 12em;   
  15.      border: 1px solid #888;  
  16. }  
  17. .focus {   
  18.      border: 1px solid #f00;  
  19.      background: #fcc;  
  20. }   
  21. </style>  
  22. <!--   引入jQuery -->  
  23. <script src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  24. <script type="text/javascript">  
  25.     $(function(){  
  26.         $(":input").focus(function(){  
  27.               $(this).addClass("focus");  
  28.               if($(this).val() ==this.defaultValue){    
  29.                   $(this).val("");             
  30.               }   
  31.         }).blur(function(){  
  32.              $(this).removeClass("focus");  
  33.              if ($(this).val() == '') {  
  34.                 $(this).val(this.defaultValue);  
  35.              }  
  36.         });  
  37.     })  
  38.     </script>  
  39. </head>  
  40. <body>  
  41.     <form action="" method="post" id="regForm">  
  42.         <fieldset>  
  43.             <legend>个人基本信息</legend>  
  44.                 <div>  
  45.                     <label  for="username">名称:</label>  
  46.                     <input id="username" type="text" value="名称" />  
  47.                 </div>  
  48.                 <div>  
  49.                     <label for="pass">密码:</label>  
  50.                     <input id="pass" type="password" value="密码" />  
  51.                 </div>  
  52.                 <div>  
  53.                     <label for="msg">详细信息:</label>  
  54.                     <textarea id="msg" rows="2" cols="20">详细信息</textarea>  
  55.                 </div>  
  56.         </fieldset>  
  57.     </form>  
  58. </body>  
  59. </html></span>  

效果图:


2、Elastic弹性文本域

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

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

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <span style="font-family:SimSun;font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.  <head>  
  4.   <title> New Document </title>  
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6.   <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  7.   <script src="jquery.elastic.source.js" type="text/javascript" ></script>  
  8.   <script type="text/javascript">  
  9.     //页面加载方法  
  10.     $(function(){  
  11.         $("textarea").elastic();//应用弹性文本框  
  12.     })  
  13.   </script>  
  14.  </head>  
  15.   
  16.  <body>  
  17.     <textarea name="" rows="2" cols="43">  
  18.     沁园春·雪  
  19. 北国风光,千里冰封,万里雪飘。  
  20.   
  21. 望长城内外,惟余莽莽;大河上下,顿失滔滔。  
  22.   
  23. 山舞银蛇,原驱蜡象,欲与天公试比高。  
  24.   
  25. 须晴日,看红装素裹,分外妖娆。  
  26.   
  27. 江山如此多娇,引无数英雄竞折腰。  
  28.   
  29. 惜秦皇汉武,略输文采;唐宗宋祖,稍逊风骚。  
  30.   
  31. 一代天骄,成吉思汗,只识弯弓射大雕。  
  32.   
  33. 俱往矣,数风流人物,还看今朝。  
  34.     </textarea>  
  35.  </body>  
  36. </html></span>  

效果图:


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

3、Autotab自动Tab文本框

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

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

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

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <span style="font-family:SimSun;font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.  <head>  
  4.   <title> New Document </title>  
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6.   <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  7.   <script  src="jquery.autotab.js" type="text/javascript"></script>  
  8.   <script type="text/javascript">  
  9.     //页面加载方法  
  10.     $(function(){  
  11.         $('#autotab').submit(function(){  
  12.             return false;  
  13.         })  
  14.         $('#autotab :input').autotab_magic();//为页面文本框绑定autotab插件  
  15.     })  
  16.   </script>  
  17.  </head>  
  18.   
  19.  <body>  
  20.     <h1>jQuery整理笔记七</h1>  
  21.     <h2>Autotab自动Tab文本框</h2>  
  22.     <form method="post" action=""  id="autotab">  
  23.         <label>请输入验证码:  
  24.         <input type="text" name="num1" id="num1" maxlength="3"  size="3">  
  25.         <input type="text" name="num2" id="num2" maxlength="3"  size="3">  
  26.         <input type="text" name="num3" id="num3" maxlength="3"  size="3">  
  27.         <input type="text" name="num4" id="num4" maxlength="3"  size="3">  
  28.         <input type="text" name="num5" id="num5" maxlength="3"  size="3">  
  29.         <input type="text" name="num6" id="num6" maxlength="3"  size="3">  
  30.     </form>  
  31.  </body>  
  32. </html></span>  

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

如果将上面的js改成:

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <span style="font-family:SimSun;font-size:12px;">$(function(){  
  2.     $('#autotab').submit(function(){  
  3.         return false;  
  4.     });  
  5.     $('#autotab :input').autotab_magic().autotab_filter('numeric');  
  6. })</span>  
就是只能输入数字了。

4、passwordStrength密码强度指标

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

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <span style="font-family:SimSun;font-size:12px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>passwordStrength</title>  
  6. <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />  
  7. <script type="text/javascript" src="jquery-2.1.0.min.js"></script>  
  8. <script type="text/javascript" src="passwordStrength.js"></script>  
  9. <script type="text/javascript">  
  10. $(function(){  
  11.     $('input[name="password"]').passwordStrength();  
  12. })  
  13. </script>  
  14. <style type="text/css">  
  15. .is0{background:url(images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;margin:10px 0 0 104px;}  
  16. .is10{background-position:0 -7px;}  
  17. .is20{background-position:0 -14px;}  
  18. .is30{background-position:0 -21px;}  
  19. .is40{background-position:0 -28px;}  
  20. .is50{background-position:0 -35px;}  
  21. .is60{background-position:0 -42px;}  
  22. .is70{background-position:0 -49px;}  
  23. .is80{background-position:0 -56px;}  
  24. .is90{background-position:0 -63px;}  
  25. .is100{background-position:0 -70px;}  
  26.    
  27. #autotab input { width:138px; }  
  28. </style>  
  29. </head>  
  30. <body>  
  31. <h1>jQuery整理笔记七</h1>  
  32. <h2>表单开发(Forms)</h2>  
  33. <hr />  
  34. <h3>passwordStrength密码强度指标</h3>  
  35. <form action="" method="post" id="autotab" class="p1">  
  36.     <label>请输入密码:  
  37.         <input type="password" name="password" />  
  38.         <div id="passwordStrengthDiv" class="is0"></div>  
  39.     </label>  
  40. </form>  
  41. </body>  
  42. </html></span>  
上例用到一个图片:

执行效果图:

5、formToWizard表单填充向导

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

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

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

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <span style="font-family:SimSun;font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.  <head>  
  4.       <title> New Document </title>  
  5.       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6.       <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  7.       <script type="text/javascript" src="formToWizard.js"></script>  
  8.       <script type="text/javascript">  
  9.         //页面加载方法  
  10.         $(function(){  
  11.             $("#form1").formToWizard({ submitButton: 'SaveAccount' })  
  12.         })  
  13.       </script>  
  14.       <style type="text/css">  
  15.         #wrap { margin:1em 4em; font-size:12px; padding:1em 1em; border:solid 1px #fff; }  
  16.         fieldset { border:none; width:320px; }  
  17.         legend { font-size:18px; margin:0px; padding:10px 0px; color:#b0232a; font-weight:bold; }  
  18.         label { display:block; margin:15px 0 5px; }  
  19.         input[type=text], input[type=password] { width:300px; padding:5px; border:solid 1px #000; }  
  20.         .prev, .next { background-color:#b0232a; padding:5px 10px; color:#fff; text-decoration:none; }  
  21.         .prev:hover, .next:hover { background-color:#000; text-decoration:none; }  
  22.         .prev { float:left; }  
  23.         .next { float:right; }  
  24.         #steps { list-style:none; width:100%; overflow:hidden; margin:0px; padding:0px; }  
  25.         #steps li { font-size:24px; float:left; padding:10px; color:#b0b1b3; }  
  26.         #steps li span { font-size:11px; display:block; }  
  27.         #steps li.current { color:#000; }  
  28.         #makeWizard { background-color:#b0232a; color:#fff; padding:5px 10px; text-decoration:none; font-size:18px; }  
  29.         #makeWizard:hover { background-color:#000; }  
  30.       </style>  
  31.  </head>  
  32.   
  33.  <body>  
  34.  <div id="wrap">  
  35.       <form id="form1" action="">  
  36.         <fieldset>  
  37.             <legend>登录信息</legend>  
  38.             <label for="Name">昵称</label>  
  39.             <input id="Name" type="text" />  
  40.             <label for="Email">Email</label>  
  41.             <input id="Email" type="text" />  
  42.             <label for="Password">密码</label>  
  43.             <input id="Password" type="password" />  
  44.         </fieldset>  
  45.         <fieldset>  
  46.             <legend>公司信息</legend>  
  47.             <label for="CompanyName">公司名称</label>  
  48.             <input id="CompanyName" type="text" />  
  49.             <label for="Website">公司网址</label>  
  50.             <input id="Website" type="text" />  
  51.             <label for="CompanyEmail">公司邮箱</label>  
  52.             <input id="CompanyEmail" type="text" />  
  53.         </fieldset>  
  54.         <fieldset>  
  55.             <legend>个人信息</legend>  
  56.             <label for="NameOnCard">真实姓名</label>  
  57.             <input id="NameOnCard" type="text" />  
  58.             <label for="CardNumber">身份证号</label>  
  59.             <input id="CardNumber" type="text" />  
  60.             <label for="CreditcardMonth">发卡日期</label>  
  61.             <select id="CreditcardMonth">  
  62.                 <option value="1">1</option>  
  63.                 <option value="2">2</option>  
  64.                 <option value="3">3</option>  
  65.                 <option value="4">4</option>  
  66.                 <option value="5">5</option>  
  67.                 <option value="6">6</option>  
  68.                 <option value="7">7</option>  
  69.                 <option value="8">8</option>  
  70.                 <option value="9">9</option>  
  71.                 <option value="10">10</option>  
  72.                 <option value="11">11</option>  
  73.                 <option value="12">12</option>  
  74.             </select>  
  75.             <select id="CreditcardYear">  
  76.                 <option value="2009">2009</option>  
  77.                 <option value="2010">2010</option>  
  78.                 <option value="2011">2011</option>  
  79.             </select>  
  80.             <label for="Address1">地址1</label>  
  81.             <input id="Address1" type="text" />  
  82.             <label for="Address2">地址2</label>  
  83.             <input id="Address2" type="text" />  
  84.             <label for="City">城市</label>  
  85.             <input id="City" type="text" />  
  86.             <label for="Country">国家</label>  
  87.             <select id="Country">  
  88.                 <option value="CA">Canada</option>  
  89.                 <option value="US">United States of America</option>  
  90.                 <option value="GB">United Kingdom (Great Britain)</option>  
  91.                 <option value="AU">Australia</option>  
  92.                 <option value="JP">Japan</option>  
  93.             </select>  
  94.         </fieldset>  
  95.         <div>  
  96.             <input id="SaveAccount" type="button" value="提交表单" />  
  97.         </div>  
  98.         </div>  
  99.     </form>  
  100.  </body>  
  101. </html>  
  102. </span>  

效果图:

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

以前经常用,不说了。

7、下拉框的应用

这回先看个图:

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

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <span style="font-family:SimSun;font-size:12px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title></title>  
  6. <style type="text/css">  
  7. * { margin:0; padding:0; }  
  8. div.centent {  
  9.    float:left;  
  10.    text-align: center;  
  11.    margin: 10px;  
  12. }  
  13. span {   
  14.     display:block;   
  15.     margin:2px 2px;  
  16.     padding:4px 10px;   
  17.     background:#898989;  
  18.     cursor:pointer;  
  19.     font-size:12px;  
  20.     color:white;  
  21. }  
  22. </style>  
  23. <!--   引入jQuery -->  
  24. <script src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  25. <script type="text/javascript">  
  26. $(function(){  
  27.     //移到右边  
  28.     $('#add').click(function() {  
  29.     //获取选中的选项,删除并追加给对方  
  30.         $('#select1 option:selected').appendTo('#select2');  
  31.     });  
  32.     //移到左边  
  33.     $('#remove').click(function() {  
  34.         $('#select2 option:selected').appendTo('#select1');  
  35.     });  
  36.     //全部移到右边  
  37.     $('#add_all').click(function() {  
  38.         //获取全部的选项,删除并追加给对方  
  39.         $('#select1 option').appendTo('#select2');  
  40.     });  
  41.     //全部移到左边  
  42.     $('#remove_all').click(function() {  
  43.         $('#select2 option').appendTo('#select1');  
  44.     });  
  45.     //双击选项  
  46.     $('#select1').dblclick(function(){ //绑定双击事件  
  47.         //获取全部的选项,删除并追加给对方  
  48.         $("option:selected",this).appendTo('#select2'); //追加给对方  
  49.     });  
  50.     //双击选项  
  51.     $('#select2').dblclick(function(){  
  52.        $("option:selected",this).appendTo('#select1');  
  53.     });  
  54. });  
  55. </script>  
  56.   
  57. </head>  
  58. <body>  
  59.     <div class="centent">  
  60.         <select multiple="multiple" id="select1" style="width:100px;height:160px;">  
  61.             <option value="1">曹操</option>  
  62.             <option value="2">曹昂</option>  
  63.             <option value="3">曹丕</option>  
  64.             <option value="4">曹彰</option>  
  65.             <option value="5">曹植</option>  
  66.             <option value="6">曹熊</option>  
  67.             <option value="7">曹仁</option>  
  68.             <option value="8">曹洪</option>  
  69.             <option value="9">曹休</option>  
  70.             <option value="10">曹真</option>  
  71.             <option value="11">曹爽</option>  
  72.         </select>  
  73.         <div>  
  74.             <span id="add" >选中添加到右边>></span>  
  75.             <span id="add_all" >全部添加到右边>></span>  
  76.         </div>  
  77.     </div>  
  78.     <div class="centent">  
  79.         <select multiple="multiple" id="select2" style="width: 100px;height:160px;">  
  80.             <option value="12">曹芳</option>  
  81.         </select>  
  82.         <div>  
  83.             <span id="remove"><<选中删除到左边</span>  
  84.             <span id="remove_all"><<全部删除到左边</span>  
  85.         </div>  
  86.     </div>  
  87. </body>  
  88. </html></span>  

代码实现的功能:

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

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

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

相关文章
|
14天前
|
JavaScript 前端开发 数据格式
2022年11月23日——jQuery——T1(基础选择器与表单选择器)
2022年11月23日——jQuery——T1(基础选择器与表单选择器)
33 0
|
1月前
|
JSON 缓存 前端开发
Jquery中AJAX的应用
Jquery中AJAX的应用
37 0
|
2月前
|
JavaScript
jQuery学习(一)—jQuery应用步骤以及ready事件和load事件的区别
jQuery学习(一)—jQuery应用步骤以及ready事件和load事件的区别
|
3月前
|
JavaScript
jQuery 遍历 - siblings() 方法应用
jQuery 遍历 - siblings() 方法应用
21 0
|
3月前
|
JavaScript 数据安全/隐私保护
Selenium+JQuery定位方法及应用
Selenium+JQuery定位方法及应用
25 0
|
3月前
|
JavaScript 前端开发 开发者
jQuery文档对象模型DOM的实际应用
jQuery文档对象模型DOM的实际应用
25 0
|
4月前
|
JavaScript 前端开发
前端基础 - JQuery 简单的表单校验器
前端基础 - JQuery 简单的表单校验器
24 0
|
4月前
|
JavaScript 前端开发
前端基础 -JQuery之 表单选择器
前端基础 -JQuery之 表单选择器
20 0
|
4月前
|
Web App开发 JavaScript 前端开发
SAP UI5 应用开发教程之四十五 - 如何在 SAP UI5 应用里使用 jQuery 和原生的 DOM API
SAP UI5 应用开发教程之四十五 - 如何在 SAP UI5 应用里使用 jQuery 和原生的 DOM API
20 0
|
8月前
|
JavaScript 前端开发
Form表单利用Jquery Validate验证以及ajax提交
Form表单利用Jquery Validate验证以及ajax提交
46 0

相关产品

  • 云迁移中心