Einfügen mehrerer Textzeilen in mehrere HTML-Eingabefelder

Question

Ich bin auf der Suche nach einer Möglichkeit, die Benutzer z. eine mehrzeilige Adresse fügen Sie sie in eine Webseite ein, wo es für jede Adresszeile ein Eingabefeld gibt, so dass nicht nur die erste Zeile eingefügt wird, sondern das Programm automatisch zum nächsten Feld springt und dort Zeile 2 einfügt bald.

Unten ist der Code, den ich zu finden geschafft, aber es ist zu Wort zählt .. Im folgenden Code begrenzt es 1 ist .. Gibt es eine Möglichkeit, die wird durch das Wort nicht aber

zählen durch Linie Zählgrenze

 <input type="text" class="text-input" name="box1"> 
     <input type="text" class="text-input" name="box2"> 


    function handleCharacter(event) { 
    var $input = $(this), 
     index = getIndex($input), 
     digit = $input.val().slice(0,1), 
     rest = $input.val().slice(1), 
     $next; 

    if (rest.length > 0) { 
     $input.val(digit); // trim input value to just one character 
     $next = $('.text-input[name="chars['+ (index + 1) +']"]'); 

     if ($next.length > 0) { 
      $next.val(rest); // push the rest of the value into the next input 
      $next.focus(); 
      handleCharacter.call($next, event); // run the same code on the next input 
     } 
    } 
} 

function handleBackspace(event) { 
    var $input = $(this), 
     index = getIndex($input), 
     $prev; 

    // if the user pressed backspace and the input is empty 
    if (event.which === 8 && !$(this).val()) { 
     $prev = $('.def-txt-input[name="chars['+ (index - 1) +']"]'); 
     $prev.focus(); 
    } 
} 

function getIndex($input) { 
    return parseInt($input.attr('name').split(/[\[\]]/)[1], 10); 
} 

$('.def-txt-input') 
    .on('keyup', handleCharacter) 
    .on('keydown', handleBackspace); 

Vielen Dank im Voraus für Ihre Hilfe !!!!

Answer 1

Ich stellte eine Textarea zur Verfügung, um Zeug einzufügen und dann die Zeilen aufzuteilen und in andere Felder einzufügen.

<textarea class="def-txt-input" id="mainbox"> 

    </textarea> 

    <br/> 
    <input type="text" class="text-input" name="box1"> 
    <input type="text" class="text-input" name="box2"> 
    <input type="text" class="text-input" name="box3"> 
    <input type="text" class="text-input" name="box4"> 
    <input type="text" class="text-input" name="box5"> 
    <input type="text" class="text-input" name="box6"> 



     <script> 

      function handleCharacter(event) { 
       var longString = $("#mainbox").val(); 
       var ks = $('#mainbox').val().split("\n"); 
       //e.preventDefault(); 

       var inputs = $(".text-input"); 

       $.each(ks, function(k){ 
        //alert(ks[k]); 
        //alert(inputs[k].name); 
        var thisName = inputs[k].name; 
        //$("[name='box1']").val('hi'); 

        $('[name="' + thisName + '"]').val(ks[k]); 


       }); 

       console.log(longString); 



      } 

      $('.def-txt-input') 
       .on('keyup', handleCharacter); 
       // .on('keydown', handleBackspace); 


     </script>