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. <body>
  16. <textarea name="" rows="2" cols="43">
  17. 沁园春·雪
  18. 北国风光。千里冰封，万里雪飘。
  19. 望长城内外，惟余莽莽；大河上下。顿失滔滔。

  20. 山舞银蛇，原驱蜡象。欲与天公试比高。
  21. 须晴日，看红装素裹，分外妖娆。
  22. 江山如此多娇，引无数英雄竞折腰。
  23. 惜秦皇汉武，略输文採。唐宗宋祖，稍逊风骚。
  24. 一代天骄，成吉思汗，仅仅识弯弓射大雕。
  25. 俱往矣。数风流人物。还看今朝。

  26. </textarea>
  27. </body>
  28. </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. <body>
  19. <h1>jQuery整理笔记七</h1>
  20. <h2>Autotab自己主动Tab文本框</h2>
  21. <form method="post" action=""  id="autotab">
  22. <label>请输入验证码：
  23. <input type="text" name="num1" id="num1" maxlength="3"  size="3">
  24. <input type="text" name="num2" id="num2" maxlength="3"  size="3">
  25. <input type="text" name="num3" id="num3" maxlength="3"  size="3">
  26. <input type="text" name="num4" id="num4" maxlength="3"  size="3">
  27. <input type="text" name="num5" id="num5" maxlength="3"  size="3">
  28. <input type="text" name="num6" id="num6" maxlength="3"  size="3">
  29. </form>
  30. </body>
  31. </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. #autotab input { width:138px; }
  27. </style>
  28. </head>
  29. <body>
  30. <h1>jQuery整理笔记七</h1>
  31. <h2>表单开发（Forms）</h2>
  32. <hr />
  33. <h3>passwordStrength密码强度指标</h3>
  34. <form action="" method="post" id="autotab" class="p1">
  35. <label>请输入password：
  36. <input type="password" name="password" />
  37. <div id="passwordStrengthDiv" class="is0"></div>
  38. </label>
  39. </form>
  40. </body>
  41. </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. <body>
  33. <div id="wrap">
  34. <form id="form1" action="">
  35. <fieldset>
  36. <legend>登录信息</legend>
  37. <label for="Name">昵称</label>
  38. <input id="Name" type="text" />
  39. <label for="Email">Email</label>
  40. <input id="Email" type="text" />
  41. <label for="Password">password</label>
  42. <input id="Password" type="password" />
  43. </fieldset>
  44. <fieldset>
  45. <legend>公司信息</legend>
  46. <label for="CompanyName">公司名称</label>
  47. <input id="CompanyName" type="text" />
  48. <label for="Website">公司网址</label>
  49. <input id="Website" type="text" />
  50. <label for="CompanyEmail">公司邮箱</label>
  51. <input id="CompanyEmail" type="text" />
  52. </fieldset>
  53. <fieldset>
  54. <legend>个人信息</legend>
  55. <label for="NameOnCard">真实姓名</label>
  56. <input id="NameOnCard" type="text" />
  57. <label for="CardNumber">身份证号</label>
  58. <input id="CardNumber" type="text" />
  59. <label for="CreditcardMonth">发卡日期</label>
  60. <select id="CreditcardMonth">
  61. <option value="1">1</option>
  62. <option value="2">2</option>
  63. <option value="3">3</option>
  64. <option value="4">4</option>
  65. <option value="5">5</option>
  66. <option value="6">6</option>
  67. <option value="7">7</option>
  68. <option value="8">8</option>
  69. <option value="9">9</option>
  70. <option value="10">10</option>
  71. <option value="11">11</option>
  72. <option value="12">12</option>
  73. </select>
  74. <select id="CreditcardYear">
  75. <option value="2009">2009</option>
  76. <option value="2010">2010</option>
  77. <option value="2011">2011</option>
  78. </select>
  79. <label for="Address1">地址1</label>
  80. <input id="Address1" type="text" />
  81. <label for="Address2">地址2</label>
  82. <input id="Address2" type="text" />
  83. <label for="City">城市</label>
  84. <input id="City" type="text" />
  85. <label for="Country">国家</label>
  86. <select id="Country">
  87. <option value="CA">Canada</option>
  88. <option value="US">United States of America</option>
  89. <option value="GB">United Kingdom (Great Britain)</option>
  90. <option value="AU">Australia</option>
  91. <option value="JP">Japan</option>
  92. </select>
  93. </fieldset>
  94. <div>
  95. <input id="SaveAccount" type="button" value="提交表单" />
  96. </div>
  97. </div>
  98. </form>
  99. </body>
  100. </html>
  101. </span>

效果图：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FvaGFpY2hlbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" style="border:none; max-width:100%">

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. </head>
  57. <body>
  58. <div class="centent">
  59. <select multiple="multiple" id="select1" style="width:100px;height:160px;">
  60. <option value="1">曹操</option>
  61. <option value="2">曹昂</option>
  62. <option value="3">曹丕</option>
  63. <option value="4">曹彰</option>
  64. <option value="5">曹植</option>
  65. <option value="6">曹熊</option>
  66. <option value="7">曹仁</option>
  67. <option value="8">曹洪</option>
  68. <option value="9">曹休</option>
  69. <option value="10">曹真</option>
  70. <option value="11">曹爽</option>
  71. </select>
  72. <div>
  73. <span id="add" >选中加入到右边>></span>
  74. <span id="add_all" >所有加入到右边>></span>
  75. </div>
  76. </div>
  77. <div class="centent">
  78. <select multiple="multiple" id="select2" style="width: 100px;height:160px;">
  79. <option value="12">曹芳</option>
  80. </select>
  81. <div>
  82. <span id="remove"><<选中删除到左边</span>
  83. <span id="remove_all"><<所有删除到左边</span>
  84. </div>
  85. </div>
  86. </body>
  87. </html></span>

代码实现的功能：

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

2)、将所有选项加入给对方

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

jQuery几个经典表单应用整理回想的更多相关文章

  1. jquery通过class验证表单不能为空

    在开发系统时,往往都有某些表单数据为必填项,若用jQuery通过ID去验证,不仅会影响效率,还会有所遗漏,不易于后期维护. 本章将介绍如何利用jQuery,通过为表单配置class进行统一验证.(ID ...

  2. 运用jQuery写的验证表单

    //运用jQuery写的验证表单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  3. jquery.form.js 让表单提交更优雅

    jquery.form.js 让表单提交更优雅.可以页面不刷新提交表单,比jQuery的ajax提交要功能强大. 1.引入 <script src="/src/jquery-1.9.1 ...

  4. 基于jQuery商品分类选择提交表单代码

    分享一款基于jQuery商品分类选择提交表单代码.这是一款基于jQuery实现的商品信息选择列表表单提交代码. 在线预览   源码下载 实现的代码: <div class="yList ...

  5. 第二百二十一节，jQuery EasyUI，Form(表单)组件

    jQuery EasyUI,Form(表单)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Form(表单)组件的使用方法,这个组件不依赖于 ...

  6. Jquery来对form表单提交（mvc方案）

    来自:http://www.cnblogs.com/lmfeng/archive/2011/06/18/2084325.html 我先说明一下,这是asp.net mvc 里面的用法, Jquery来 ...

  7. jquery.validate.js 验证表单时，在IE当中未验证就直接提交的原因

    jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...

  8. jquery扩展方法（表单数据格式化为json对象）

    1.jquery扩展方法(表单数据格式化为json对象) <script type="text/javascript"> // 将表单数据序列化为一个json对象,例如 ...

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

    1.文本框获得(失去)焦点 当文本框获得输入焦点时,将该文本框高亮显示,算不得一个应用,仅仅是一个小技巧,能够提高用户体验. <!DOCTYPE html PUBLIC "-//W3C ...

随机推荐

  1. HDU 6060 RXD and dividing（dfs 思维）

    RXD and dividing Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 524288/524288 K (Java/Other ...

  2. 【UOJ 79】 一般图最大匹配 (✿带花树开花)

    从前一个和谐的班级,所有人都是搞OI的.有 n 个是男生,有 0 个是女生.男生编号分别为 1,…,n. 现在老师想把他们分成若干个两人小组写动态仙人掌,一个人负责搬砖另一个人负责吐槽.每个人至多属于 ...

  3. 「THUWC 2017」随机二分图

    「THUWC 2017」随机二分图 解题思路 : 首先有一个 \(40pts\) 的做法: 前 \(20pts\) 暴力枚举最终的匹配是怎样的,check一下计算方案数,后 \(20pts\) 令 \ ...

  4. 【LCA/tarjan】POJ1470-Closest Common Ancestors

    [题意] 给出一棵树和多组查询,求以每个节点为LCA的查询数有多少? [错误点] ①读入的时候,注意它的空格是随意的呀!一开始不知道怎么弄,后来看了DISCUSS区大神的话: 询问部分输入: scan ...

  5. mac安装redis拓展

    安装 下载源码 编译安装 添加拓展 添加权限重启 安装 在mac上安装了php7.1.7 php -m 查看安装的拓展,没有redis,以前可以brew install php71-redis简单命令 ...

  6. [转]Android开发过程中遇到的问题

    例1: ‘Can't bind to local 8700 for debugger’报错和解决     1.CTS测试出现,运行startcts后,‘Can't bind to local 8700 ...

  7. 用rem设置文字大小

    一.px与em 用px设置文字大小是再正常不过的事情,比如 html {font-size: 12px;} 随处可见的在设置width.height使用px,这也是细致稳妥的设置方法,这样做的缺点在于 ...

  8. Delphi DLL制作和加载 Static, Dynamic, Delayed 以及 Shared-Memory Manager

    一 Dll的制作一般分为以下几步:1 在一个DLL工程里写一个过程或函数2 写一个Exports关键字,在其下写过程的名称.不用写参数和调用后缀.二 参数传递1 参数类型最好与window C++的参 ...

  9. 单向可控硅（SCR）双向可控硅（TRIAC）

    双向可控硅工作原理与特点 从理论上来讲,双向可控硅可以说是有两个反向并列的单向可控硅组成,理解单向可控硅的工作原理是理解双向可控硅工作原理的基础 单向可控硅 单向可控硅也叫晶闸管,其组成结构图如图1- ...

  10. Meanshift算法

    [转载自Liqizhou],原文地址 Mean Shift算法,一般是指一个迭代的步骤,即先算出当前点的偏移均值,移动该点到其偏移均值,然后以此为新的起始点,继续移动,直到满足一定的条件结束. 1. ...