angularjs move focus to next control on enter

Question

What is the best way, when hitting enter inside a form, the focus to go to the next input instead submitting the form with angularjs.

I have a form with a lot of fi

Answer 1

I tried this solution out. As advertised, it needed some tweaking. Here is what ended up working for me:

.directive("focus", function () {
        return {
            restrict: "A",
            link: function ($scope, elem, attrs) {
                var focusables = $(":focusable");
                elem.bind("keydown", function (e) {
                    var code = e.keyCode || e.which;
                    if (code === 13) {
                        var current = focusables.index(this);
                        var next = focusables.eq(current + 1).length ? focusables.eq(current + 1) : focusables.eq(0);
                        next.focus();
                        e.preventDefault();
                    }
                });
            }
        }

Note that the in order to get the :focusable pseudo to work, you will need to reference JQueryUI. (the latest version 1.11.4 worked for me)

Answer 2

Create a custom directive:

.directive('nextOnEnter', function () {
    return {
        restrict: 'A',
        link: function ($scope, selem, attrs) {
            selem.bind('keydown', function (e) {
                var code = e.keyCode || e.which;
                if (code === 13) {
                    e.preventDefault();
                    var pageElems = document.querySelectorAll('input, select, textarea'),
                        elem = e.srcElement || e.target,
                        focusNext = false,
                        len = pageElems.length;
                    for (var i = 0; i < len; i++) {
                        var pe = pageElems[i];
                        if (focusNext) {
                            if (pe.style.display !== 'none') {
                                angular.element(pe).focus();
                                break;
                            }
                        } else if (pe === elem) {
                            focusNext = true;
                        }
                    }
                }
            });
        }
    }
})

Answer 3

This is the directive I ended up with (thanks to Zack Argyle and Oleg):

app.directive("nextFocus", function () {

    /** Usage:
      <input next-focus tabindex="0" id="field1">
      <input next-focus tabindex="1" id="field2">
      <input id="field3">
      Upon pressing ENTER key the directive will switch focus to
      the next field id e.g field2
      The last field should not have next-focus directive to avoid
      focusing on non-existing element.
      Works for Web, iOS (Go button) & Android (Next button) browsers, 
    **/
    var directive = {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            elem.bind('keydown', function (e) {
                var code = e.keyCode || e.which;
                if (code === 13) {
                    try {
                        if (attrs.tabindex != undefined) {
                            var currentTabIndex = attrs.tabindex;
                            var nextTabIndex = parseInt(attrs.tabindex) + 1;
                            $("[tabindex=" + nextTabIndex + "]").focus();
                        }
                    } catch (e) {

                    }
                }
            });
        }
    };
    return directive;

});

Answer 4

Pure JavaScript Enter as TAB

angular.module('app').directive('tabNext', function () {
return {
    restrict: 'A',
    link: function (scope, elem) {

        elem.bind('keyup', function (e) {
            var code = e.keyCode || e.which;
            if (code === 13) {
                e.preventDefault();
                var eIDX = -1;
                for (var i = 0; i < this.form.elements.length; i++) {
                    if (elem.eq(this.form.elements[i])) {
                         eIDX = i;
                         break;
                    }
                }
                if (eIDX === -1) {
                    return;
                }
                var j = eIDX + 1;
                var theform = this.form;
                while (j !== eIDX) {
                    if (j >= theform.elements.length){
                        j = 0;
                    }
                    if ((theform.elements[j].type !== "hidden") && (theform.elements[j].type !== "file")
                            && (theform.elements[j].name !== theform.elements[eIDX].name) 
                            && (! theform.elements[j].disabled) 
                            && (theform.elements[j].tabIndex >= 0)) {
                        if (theform.elements[j].type === "select-one") {
                            theform.elements[j].focus();
                        } else if (theform.elements[j].type === "button") {
                            theform.elements[j].focus();
                        } else {
                            theform.elements[j].focus();
                            theform.elements[j].select();
                        }
                        return;
                        break;
                    }
                    j++;
                }
            }
        });
    }
}});