2010年12月21日 星期二

如何實現不按tab鍵自動跳到下一個input欄位

客戶反應希望可以不按tab鍵，就可以自動跳到下一個欄位，加強一下方便性…
這個例子的輸入是一定要滿足最大輸入，
所以移動焦點的觸發條件是檢查目前輸入的內容的長度是否己經等於maxlength…
一、Jquery的部份…

$(function(){
    $('input:first').focus(); 
    $('input').keyup(function(){
        var inputs = $('input'); //先取得所有input元素
        var maxlen = $(this).attr('maxlength');   //取得目前元素的maxlength
        if( $(this).val().length == maxlen ){ //當滿足maxlength時...
            inputs.eq( inputs.index($(this))+ 1 ).focus(); 
   //利用.index算出目前元素是在所有元素中的索引值，再將索引值+1，指向下一個input
        }
    }); 
});
二、完整的程式碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="../js/jquery-1.4.3.min.js"></script>
        <script type="text/javascript">
$(function(){
    $('input:first').focus(); 
    $('input').keyup(function(){
        var inputs = $('input'); //先取得所有input元素
        var maxlen = $(this).attr('maxlength');   //取得目前元素的maxlength
        if( $(this).val().length == maxlen ){ //當滿足maxlength時...
            inputs.eq( inputs.index($(this))+ 1 ).focus(); 
   //利用.index算出目前元素是在所有元素中的索引值，再將索引值+1，指向下一個input
        }
    }); 
});
        </script>
    </head>
    <body>
     
<form id="form1" name="form1" method="post" action="report_check.php">
  <table width="98%" border="1" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td align="center" width="100" height="25">Serial Code:</td>
      <td align="left"><input name="code[]" type="text" size="8" maxlength="4" />
        <input name="code[]" type="text" size="8" maxlength="4" />
        <input name="code[]" type="text" size="8" maxlength="4" />
        <input name="code[]" type="text" size="8" maxlength="4" />
        &nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;
        <input name="code[]" type="text" size="8" maxlength="4" />
        <input name="code[]" type="text" size="8" maxlength="4" />
        <input name="code[]" type="text" size="8" maxlength="4" />
        <input name="code[]" type="text" size="8" maxlength="4" /></td>
    </tr>
    <tr>
      <td align="center" width="100" height="25">Number1:</td>
      <td align="left"><input name="number1" type="text" maxlength="7" /></td>
    </tr>
    <tr>
      <td align="center" width="100" height="25">Number2:</td>
      <td align="left"><input name="number2" type="text" maxlength="10" /></td>
    </tr>
    <tr>
      <td colspan="2" align="center"><input name="bn_submit" type="submit"  value="Submit"/></td>
    </tr>
  </table>
</form></body>
</html>
張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)