Type A Word From The Keyboard And Store Each Letter Into A Series Of Multiple Input Text Boxes

I would like to present to the user several input text box that allows them to type a string of letters or characters that stores one letter into each box in a 'spill-over' manner.

Solution 1:

If you need a jquery solution, than you can use .keyup() event, and an if condition, which will check the length of the input filed, if it exceeds 1, it will focus the very next field.

Demo

$("input").keyup(function() {
    if($(this).val().length >= 1) {
      var input_flds = $(this).closest('form').find(':input');
      input_flds.eq(input_flds.index(this) + 1).focus();
    }
});

Make sure you also use maxlength attribute on your input fields, so that a user typing fast may not exceed the character limit.

Demo 2

Solution 2:

As @Mr.Alien said, setting MaxLength property will safeguard the text box in having more than 1 character of text. Additionally, You should select the text in the text box while it is getting a focus. It will simplify the process if user starts from the first text box again.

$("input").keyup(function() {

      var input_flds = $(this).next("input");
      input_flds.select().focus();

});

DEMO It is a modified copy of @Mr.Alien demo

Update:

Implementing the above concept in a selected text box, [Concept: Set a class for the text boxes which you want to apply the need]

$("input").keyup(function() {

    var input_flds = $(this).nextAll(".test:first");
    input_flds.select().focus();

});

//where .test will be your class on the selected text boxes.

DEMO - 1