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

时间:2017-04-20 09:16:38

标签: javascript html

我正在寻找让用户复制的方法,例如一个多行地址将其粘贴到一个网页中,每个地址行都有一个输入字段,这样不仅可以粘贴第一行,而且程序会自动跳转到下一个字段并将第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);

先谢谢你的帮助!!!!

1 个答案:

答案 0 :(得分:0)

我提供了一个textarea粘贴东西,然后分割线并粘贴在其​​他框中。

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