使用JavaScript / jQuery将制表符后的字符串值剪切并粘贴到下一个输入

Question

I was wondering how can I achieve, using javascript/jquery, splitting a string as listed below -

abc543567   abc543678   abc223416   abc634567

into four inputs, so that each group can be moved into a separate input. Basically, when I copy this string into the first input, the first group can remain in the first input, the second to be moved in the second input, and so on. In the example, between the groups, I used as separator the tab characters. Here is the html for the inputs: https://jsfiddle.net/2sb6ggz0/

Update of HTML:

<table>
<tr>
    <td>
        <form name="form1" action="#" method="get" target="">
            <input id="input1" name="query" placeholder="Input 1" type="search" size="20">
        </form>
    </td>
    <td>
        <form name="form2" action="#" method="get" target="">
            <input id="input2" name="query" placeholder="Input 2" type="search" size="20">
        </form>
    </td> 
    <td>
        <form name="form3" action="#" method="get" target="">
            <input id="input3" name="query" placeholder="Input 3" type="search" size="20">
        </form>
    </td>
    <td>                    
        <form name="form4" action="#" method="get" target="">
            <input id="input4" name="query" placeholder="Input 4" type="search" size="20">
        </form>
    </td>
</tr>
</table>

Is there a way top achieve this?

Answer 1

You can respond to the paste event by detecting what's in the first input and, if appropriate, moving bits of it to the other three (see comments) :

 // Text to paste: abc543567 abc543678 abc223416 abc634567 // Hook "paste" on the first input $("#input1").on("paste", function() { // Remember the input and wait a second so the paste gets filled in var input = this; setTimeout(function() { // See if it matches our format var n; var value = input.value; var m = /^[ \\t]*([\\w\\d]{9})[ \\t]+([\\w\\d]{9})[ \\t]+([\\w\\d]{9})[ \\t]+([\\w\\d]{9})[ \\t]*$/.exec(value); if (m) { // It does, save the values to the other fields for (n = 1; n <= 4; ++n) { $("#input" + n).val(m[n]); } } }, 0); }); 

 <table> <tr> <td> <form name="form1" action="#" method="get" target=""> <input id="input1" name="query" placeholder="Input 1" type="search" size="20"> </form> </td> <td> <form name="form2" action="#" method="get" target=""> <input id="input2" name="query" placeholder="Input 2" type="search" size="20"> </form> </td> <td> <form name="form3" action="#" method="get" target=""> <input id="input3" name="query" placeholder="Input 3" type="search" size="20"> </form> </td> <td> <form name="form4" action="#" method="get" target=""> <input id="input4" name="query" placeholder="Input 4" type="search" size="20"> </form> </td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

You'll want to adjust the regular expression to accept the correct format; I just told it to allow exactly 9 "word" characters and digits in four groups, separated by one or more tabs or spaces.

Answer 2

Here is your updated fiddle: https://jsfiddle.net/2sb6ggz0/6/

function split(sep, clazz) {

    var items = $(clazz);

    items.each(function (i) {

        $(this).on("paste", function () {
            var me = $(this);
            setTimeout(function () {
                var splitted = me.val().split(sep);
                items.each(function (i) {
                    $(this).val(splitted[i]);
                });
            }, 1);
        });
    })
};    
split("-", ".query-input")

Answer 3

Here is a possible solution.

$("input[name=query]").on("paste", function() {
    var $this = $(this);
    setTimeout(function() {
        var id = $this.attr("id"), no = parseInt(id.substr(5)),
            groups = $this.val().split(/\s+/);
        if (groups) {
            var i = 0;
            while (no <= 4 && i < groups.length) {
                $("#input" + no).val(groups[i]);
                ++no;
                ++i;
            }
        }
    }, 0);
});

Fiddle here: https://jsfiddle.net/robbyn/rn9ydtop/

Answer 4

You can use an event listener to skip to the next box when you have typed in a certain number of characters.

In jQuery it would be something like

$('input').on('keyup', function(e) {
    if (e.target.val().length === 9) {
        $(this).nextAll('input').first().focus();
    }
})