谷歌表格保存在excel表格

Question

我做了一個表格格式。我希望表中的輸入字段在下一次達到最大長度時專注於下一個。我已經使用jQuery代碼，但它只能使用輸入而不是td。代碼如下：

$(".inputs").keyup(function() { 
    var index = $('.inputs').index(this) + 1; 
    $('.inputs').eq(index).focus(); 
}); 

和table的html代碼：

<form> 
    <table> 

     <tr> 

      <td class="custom_header">First Name* </td> 

      <td><input class="input" type="text" maxlength="1" required/></td> 

      <td><input class="input" type="text" maxlength="1" required/></td> 

      <td><input class="input" type="text" maxlength="1" required/></td> 

      <td><input class="input" type="text" maxlength="1" required/></td> 

      <td><input class="input" type="text" maxlength="1" required/></td> 

      <td><input class="input" type="text" maxlength="1" required/></td> 

      <td><input class="input" type="text" maxlength="1" required/></td> 

      <td><input class="input" type="text" maxlength="1" required/></td> 

      <td><input class="input" type="text" maxlength="1" required/></td> 

      <td><input class="input" type="text" maxlength="1" required/></td> 

      <td><input class="input" type="text" maxlength="1" required/></td> 

      <td><input class="input" type="text" maxlength="1" required/></td> 

      <td><input class="input" type="text" maxlength="1" required/></td> 

      <td><input class="input" type="text" maxlength="1" required/></td> 

      <td><input class="input" type="text" maxlength="1" required/></td> 

      <td><input class="input" type="text" maxlength="1" required/></td> 

      <td><input class="input" type="text" maxlength="1" required/></td> 

      <td><input class="input" type="text" maxlength="1" required/></td> 

      <td><input class="input" type="text" maxlength="1" required/></td> 

     </tr> 
    </table> 

</form> 

以及如何提交此表作爲谷歌形式，它有這麼多的投入？

Answer 1

嘗試在<input />中使用tabinex屬性。以下是工作示例：

<form> 
     <table> 
      <tbody> 
       <tr> 
        <td> 
         <input tabindex="0" class="input" type="text" maxlength="1" required/> 
        </td> 
        <td> 
         <input tabindex="1" class="input" type="text" maxlength="1" required/> 
        </td> 
        <td> 
         <input tabindex="2" class="input" type="text" maxlength="1" required/> 
        </td> 
        <td> 
         <input tabindex="3" class="input" type="text" maxlength="1" required/> 
        </td> 
        <td> 
         <input tabindex="4" class="input" type="text" maxlength="1" required/> 
        </td><br /> 
        <td> 
         <input tabindex="5" class="input" type="text" maxlength="1" required/> 
        </td> 
        <td> 
         <input tabindex="6" class="input" type="text" maxlength="1" required/> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </form> 

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script> 
<script> 
    $(document).ready(function() { 
     $('.input').on('keyup', function(e) { 
      var input = $(this), 
      nextInput = $('input[tabindex="' + (Number(input.attr('tabindex')) + 1) + '"]'); 

      // If current input value is reached max limit and if there is any next input 
      // then it will make focus to it. 
      input.val().length == input.attr('maxlength') && nextInput.length && nextInput.focus() 
       }); 
       }); 
    </script>