将多个文本行粘贴到多个 html 输入框中答案

【问题标题】：Paste multiple text lines into multiple html input boxes将多个文本行粘贴到多个 html 输入框中
【发布时间】：2017-04-20 09:16:38
【问题描述】：

我正在寻找一种让用户复制的方法，例如多行地址将其粘贴到网页中，其中每个地址行都有一个输入字段，这样不仅会粘贴第一行，而且程序会自动跳转到下一个字段并将第 2 行放入其中，然后以此类推。

下面是我设法找到的代码，但它仅限于字数..在下面的代码中它是 1.. 有没有什么方法可以不限制字数而是行数

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

提前感谢您的帮助！！！！

【问题讨论】：

也许你会发现this 有用？

标签： javascript html

【解决方案1】：

我提供了一个文本区域来粘贴内容，然后拆分行并粘贴到其他框中。

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

【讨论】：