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

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery几个经典表单应用整理回想相关的知识，希望对你有一定的参考价值。

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

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


[html] view plaincopy技术分享技术分享
  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">password:</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 plaincopy技术分享技术分享
  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 plaincopy技术分享技术分享
  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 plaincopy技术分享技术分享
  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插件可以依据用户输入的password,以图形化方式显示password的强度。

[html] view plaincopy技术分享技术分享
  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>请输入password：  
  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 plaincopy技术分享技术分享
  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">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、下拉框的应用

这回先看个图：

技术分享

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

[html] view plaincopy技术分享技术分享
  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)、双击某个选项将其加入给对方


















以上是关于jQuery几个经典表单应用整理回想的主要内容，如果未能解决你的问题，请参考以下文章

jQuery整理笔记文件夹

jQuery事件整理回想

jQuery经典面试题及答案精选

jQuery经典面试题及答案精选（转）

开发中遇到的jquery函数应用和表单验证处理

经典asp，jquery和Ajax最可靠的框架