彰化一整天的論壇

 找回密碼
 立即註冊
查看: 1113|回復: 0

鍵盤事件,表單自動跳輸入框

[複製鏈接]
發表於 2013-9-9 21:56:03 | 顯示全部樓層 |閱讀模式
本帖最後由 imingho 於 2013-9-9 22:14 編輯

  1. <!DOCTYPE html>
  2. <html>
  3. <!--
  4.   Created using jsbin.com
  5.   Source can be edited via http://jsbin.com/EMItABo/2/edit
  6. -->
  7. <head>
  8. <script src="http://code.jquery.com/jquery.min.js"></script>
  9. <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
  10. <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
  11. <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
  12. <meta charset=utf-8 />
  13. <title>鍵盤事件,表單自動跳輸入框</title>

  14. <style id="jsbin-css">

  15. </style>
  16. </head>
  17. <body>
  18.   <form method="post">
  19.     <table class="table table-bordered">
  20.       <thead>
  21.         <tr>
  22.           <th>項目</th>
  23.           <th>填寫</th>
  24.           <th>採計上限</th>
  25.         </tr>
  26.       </thead>
  27.       <tbody>
  28.         <tr>
  29.           <th>均衡學習</th>
  30.           <td><input class="input-block-level" id="balanced" name="balanced" type="text"/></td>
  31.           <td>上限10分</td>
  32.         </tr>
  33.         <tr>
  34.           <th>服務學習</th>
  35.           <td><input class="input-block-level" id="services" name="services" type="text"/></td>
  36.           <td>上限10分</td>
  37.         </tr>
  38.         <tr>
  39.           <th>體適能</th>
  40.           <td><input class="input-block-level" id="fitness" name="fitness" type="text"/></td>
  41.           <td>上限20分</td>
  42.         </tr>
  43.         <tr>
  44.           <th>獎勵紀錄</th>
  45.           <td>
  46.             大功 <input class="input-mini" id="meritA" name="meritA" type="text"/>
  47.             小功 <input class="input-mini" id="meritB" name="meritB" type="text"/><br /><br />
  48.             嘉獎 <input class="input-mini" id="meritC" name="meritC" type="text"/>
  49.           </td>
  50.           <td>上限10分</td>
  51.         </tr>
  52.         <tr>
  53.           <th>幹部任期</th>
  54.           <td><input class="input-block-level" id="term" name="term" type="text"/></td>
  55.           <td>上限10分</td>
  56.         </tr>
  57.       </tbody>
  58.     </table>
  59.   </form>
  60. <script>
  61. // 1.輸入框內按下「Enter、向下鍵」自動跳至下一個輸入框,且全選裡面的文字
  62. // 2.輸入框內按下「向上鍵」自動跳至上一個輸入框,且全選裡面的文字
  63. // event.which 回傳按鍵的 Unicode 值(http://api.jquery.com/event.which/)
  64. // select() 可全選(http://www.w3schools.com/jsref/met_password_select.asp)

  65. $(':text').on('keyup',function(e){
  66.   //get all text inputs
  67.   /*
  68.   var preInput;
  69.   var nextInput;
  70.   */
  71.   var $inputs = $('input[type=text]');



  72. for (var i = 0; i < $inputs.length; i++) {

  73.     if ($inputs[i].name==$(this).attr('name')) {
  74.         $preInput=$inputs[(i+$inputs.length-1)% $inputs.length ];
  75.         $nextInput=$inputs[(i+1) % $inputs.length];
  76.     }

  77. }
  78.   
  79.   //alert($(this).attr('name'));
  80.   if(e.which==38  )//向上
  81.   {
  82.     $preInput.select();

  83.   }
  84.   if(e.which==13 || e.which==40  )//Enter 向下
  85.   {
  86.     $nextInput.select();
  87.   }
  88.    
  89. });
  90. </script>


  91. </body>
  92. </html>
複製代碼
http://jsbin.com/EMItABo/3/

回復

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 立即註冊

本版積分規則

 ㄚ母滴雞湯
 員林香純滴雞精

Archiver|手機版|小黑屋|彰化一整天的論壇(Excel,Office)  |网站地图

GMT+8, 2019-10-17 13:10 , Processed in 0.151859 second(s), 18 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表