Paste multiple text lines into multiple html input boxes

Question

I am looking for a way to let the users copy e.g. a multi-line address paste it into a webpage where there is one input field for each address line in such a way that not only the first line is pasted, but instead the program automatically jumps to the next field and put line 2 in there and so on.

Below is the code I managed to find, But it's limited to word counts.. In the below code it's 1.. Is there any way which won't limit by word count but by line count

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

Thanks in advance for your help!!!!

Maybe you'll find [this](http://stackoverflow.com/questions/10950538/how-to-detect-line-breaks-in-a-text-area-input) useful? — StackSlave, Apr 20 '17 at 09:21

score 1 · Accepted Answer · answered Apr 20 '17 at 11:48

I provided a textarea to paste stuff and then split the lines and pasted in other boxes.

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

Paste multiple text lines into multiple html input boxes

1 Answers1