Googleフォームを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> 

そしてそれは非常に多くの入力を持っているとして、Googleの形態として、このフォームを送信するためにどのように？

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>