jQuery整理笔记七----几个经典表单应用

我会带着你远行 2022-08-27 10:54 162阅读 0赞

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

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

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

效果图：

![SouthEast][]

**2、Elastic弹性文本域**

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

插件下载地址：[点击进入下载页面][Link 1]

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

效果图：

![Center][]

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

**3、Autotab自动Tab文本框**

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

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

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

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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

如果将上面的js改成：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

上例用到一个图片：

![Center 1][]

执行效果图：

![Center 2][]

**5、formToWizard表单填充向导**

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

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

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

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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

效果图：

![Center 3][]![Center 4][]

![Center 5][]

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

以前经常用，不说了。

**7、下拉框的应用**

这回先看个图：

![Center 6][]

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

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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.   
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)、双击某个选项将其添加给对方

[view plain]: http://blog.csdn.net/caohaicheng/article/details/24802613#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/324057
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/324057/fork
[SouthEast]: /images/20220824/87db31b689334b6b88f38e2a40b65fda.png
[Link 1]: http://download.csdn.net/detail/hai_cheng001/7264113
[Center]: /images/20220824/c845aee499cf4953b83bbf747a1f4fbc.png
[Link 2]: http://download.csdn.net/detail/hai_cheng001/7265809
[Center 1]: /images/20220824/ee362359a4be456399509899ea438bc6.png
[Center 2]: /images/20220824/c95ca12c6b34449a83295e896bb78f41.png
[Link 3]: http://download.csdn.net/detail/hai_cheng001/7270663
[Center 3]: https://img-blog.csdn.net/20140430170215406?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FvaGFpY2hlbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 4]: /images/20220824/da8eb8bc922745cd97586b4359aa7c8a.png
[Center 5]: /images/20220824/16b1d4c3f69d4c90b076039586c3fb5f.png
[Center 6]: /images/20220824/2782ad208345491b9735b9891437e708.png