Type a word from the keyboard and store each lette

Question

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. Each box is an input text type that has a limit of 1 character.

For example, the image above shows 3 input boxes (don't count the first box which shows the first letter of a word). If I type continuously a s t, 'a' should go into box2, 's' into box3 and 't' into box4. Is this possible?

At the moment, I can only manage to type one letter per box and then either have to hit the tab key or use the mouse to move the focus to the next input box on the right.

What magical CSS/HTML/Javascript would I be needing for me to complete this Quest, Sire?

Reference/Related: http://moodurian.blogspot.com/2013/09/how-i-managed-to-allow-input-of-only-1.html

Answer 1

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

Answer 2

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