It fails because this is the document in your code.

You want to use the index of the currently focused item (document.activeElement), or if you use delegated events you can make sure this is the current item.

This final version works whether there are tabindexes or not. It also wraps around:

JSFiddle 1: http://jsfiddle.net/TrueBlueAussie/5WkVW/11/

JSFiddle 2: http://jsfiddle.net/TrueBlueAussie/5WkVW/12/

They both use a custom jQuery selector that I add called :focusable to select all focusable element (including links):

// register jQuery extension

jQuery.extend(jQuery.expr[':'], {

    focusable: function (el, index, selector) {

        return $(el).is('a, button, :input, [tabindex]');

    }

});



$(document).on('keypress', 'input,select', function (e) {

    if (e.which == 13) {

        e.preventDefault();

        // Get all focusable elements on the page

        var $canfocus = $(':focusable');

        var index = $canfocus.index(this) + 1;

        if (index >= $canfocus.length) index = 0;

        $canfocus.eq(index).focus();

    }

});

You can use the same custom selector in the event handler if you like. Then it will even work on anchor links (if you change the event to keydown instead of keypress):

e.g.

$(document).on('keydown', ':focusable', function (e) {

Example with link: http://jsfiddle.net/5WkVW/15/

This also uses a delegated on, listening for the keydown event on the document. It then applies the jQuery selector, it then applies the function to any matching element that caused the event. This is much more efficient as it only applies the selector at event time (rather than apply multiple event handler to each DOM matching element).

Old versions below:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/5WkVW/3/

$(document).keypress(function(e) {

    if(e.which == 13) {



            // Do something here if the popup is open

            //alert(dd)

            var index = $('.ui-dform-text').index(document.activeElement) + 1;

            $('.ui-dform-text').eq(index).focus();



    }

});

*Note: alerts can interfere with focus, so use console.log for output like that and view in most browser's debug window (like Chrome's F12 debugging tools).

Update: http://jsfiddle.net/TrueBlueAussie/5WkVW/4/

This one wraps back to the first item from the last and also works on selects (the default behavior is blocked, so you can only use space to open or up/down to select options.

$('input,select').on('keypress', function (e) {

    if (e.which == 13) {

        e.preventDefault();

        var $next = $('[tabIndex=' + (+this.tabIndex + 1) + ']');

        console.log($next.length);

        if (!$next.length) {

            $next = $('[tabIndex=1]');

        }

        $next.focus();

    }

});

Requested document version: http://jsfiddle.net/TrueBlueAussie/5WkVW/5/

$(document).on('keypress', 'input,select', function (e) {

    if (e.which == 13) {

        e.preventDefault();

        var $next = $('[tabIndex=' + (+this.tabIndex + 1) + ']');

        console.log($next.length);

        if (!$next.length) {

            $next = $('[tabIndex=1]');

        }

        $next.focus();

    }

});