CODEWITHSUNDEEP
javascripthtml
mtcrts70
mtcrts70

Reputation: 35

Tab cursor when character inserted into input textbox

Here is a js fiddle example:

http://jsfiddle.net/4m5fg/158/

HTML:

<input type="text" maxlength="1" size="1" />
<input type="text" maxlength="1" size="1" />
<input type="text" maxlength="1" value="e" tabindex="-1" size="1" readonly />
<input type="text" maxlength="1" size="1" />
<input type="text" maxlength="1" value="r" tabindex="-1" size="1" readonly />
<input type="text" maxlength="1" size="1" />

<div>
<button class="buttons">á</button>
<button class="buttons">é</button>
<button class="buttons">í</button>
<button class="buttons">ó</button>
<button class="buttons">ú</button>
<button class="buttons">ñ</button>
<button class="buttons">ü</button>
</div>

JS:

$("input").bind("input", function () {
    var $this = $(this);
    if ($this.val().length >= parseInt($this.attr("maxlength"), 10)) {
        var nextEmpty = $this.nextAll("input[value=''], input:not([value])")[0];
        if (nextEmpty) {
            nextEmpty.focus();
        }
    }
});

$('input').focus(function(){
        $(this).addClass('active').siblings('.active').removeClass('active')
});

    $(".buttons").click(function () {
        var cntrl = $(this).html();
        $('input.active').val(cntrl);
    });

As can be seen from the js fiddle when the user enters a letter from the keyboard the cursor tabs to the next blank input textbox. How can I replicate this same behavior (tabbing to next blank) when the user clicks a character button and inserts it into the textbox.

Upvotes: 0

Views: 236

Answers (1)

NanoWizard
NanoWizard

Reputation: 2164

$('input.active').next().focus();

fiddle

Upvotes: 1

Related Questions