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

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?

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

• javascript
• jquery

• you want to make it like serial key?` ABC-DEV-322` splitted to 3 inputs? – Xandrios93 Commented May 11, 2015 at 10:09
• This wasn't my premise, however, yes, it can be taken as a serial key input. It would be 4 inputs. – Dantès Cristo Commented May 11, 2015 at 10:14
• im working on it :) hold on – Xandrios93 Commented May 11, 2015 at 10:14
• Are the sections ALWAYS in the format of 9 alphanumeric characters? – freefaller Commented May 11, 2015 at 10:21
• @ freefaller - No, the sections would be variable in length – Dantès Cristo Commented May 11, 2015 at 10:41

4 Answers 4

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 ments):

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

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/robbyn/rn9ydtop/

Here is your updated fiddle: https://jsfiddle/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")

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