Google Formular speichern in Excel-Blatt

Question

Ich habe ein Formular im Tabellenformat erstellt. Ich möchte, dass das Eingabefeld innerhalb der Tabelle auf den nächsten Punkt fokussiert, sobald die maximale Länge erreicht ist. Ich habe jquery Code verwendet, aber es arbeitet nur mit Eingängen nicht mit td. Der Code ist unten:

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

und der table HTML-Code:

<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> 

Und wie dieses Formular als Google-Formular einzureichen, da es so viele Eingänge hat?

Answer 1

Versuchen tabinex Attribut in <input /> zu verwenden. Im Anschluss arbeitet Beispiel:

<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>