Knockout Autotab

A simple autotab support binding handler for knockout.

HTML

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<input type="text" data-bind="valueUpdate: 'afterkeydown', value: one, autoTab: {next: 'two'}" maxlength="4" id="one">&nbsp;<span data-bind="text: one"></span>

<br/>
<input type="text" data-bind="valueUpdate: 'afterkeydown', value: two, autoTab: {next: 'three', prev: 'one'}" maxlength="4" id="two">&nbsp;<span data-bind="text: two"></span>

<br/>
<input type="text" data-bind="valueUpdate: 'afterkeydown', value: three, autoTab: {prev: 'two'}" maxlength="4" id="three">&nbsp;<span data-bind="text: three"></span>
<br>
<br>
<span id="length"></span>
<br>
<span id="test"></span>
<br>
<span id="test2"></span>
<br>
<span id="test3"></span>

JavaScript

ko.bindingHandlers.autoTab = {
    update: function (element, valueAccessor, allBindings) {
        var v = allBindings().value,
            value = ko.utils.unwrapObservable(v),
            options = ko.utils.unwrapObservable(valueAccessor() || {}),
            autoTab = v.autoTab || {};
            
            $('#length').text(value.length);
            $('#test2').text(autoTab.length);

        if (autoTab !== value && $(element).attr('maxLength') && value.length.toString() === $(element).attr('maxLength').toString() && options.next != undefined) {
            $('#' + options.next).focus().select();
        }
        

        if (autoTab !== value && value.length.toString() === '0' && options.prev != undefined) {
            $('#' + options.prev).focus();
        }
        
        v.autoTab = value;
    }
};

var ViewModel = function () {
    this.one = ko.observable('');
    this.two = ko.observable('');
    this.three = ko.observable('');
};

ko.applyBindings(new ViewModel());