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

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

    


    angular.module('myApp').directive("nextFocus", nextFocus);

    /** Usage:
      <input next-focus id="field1">
      <input next-focus 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, 
    **/

    function nextFocus() {
      var directive = {
        restrict: 'A',
        link: function(scope, elem, attrs) {
          elem.bind('keydown', function(e) {
            var partsId = attrs.id.match(/field(\d{1})/);
            var currentId = parseInt(partsId[1]);

            var code = e.keyCode || e.which;
            if (code === 13) {
              e.preventDefault();
              document.querySelector('#field' + (currentId + 1)).focus();
            }
          });
        }
      };
      return directive;

    }

Answer 2

  $scope.moveFocus = function (nextId,prevId,downId,upId,index,event) {
            debugger;
            if (event.keyCode == 39) {
                nextId = nextId + index;
                $('#' + nextId).focus();
            }
            else if(event.keyCode == 37)
            {
                prevId = prevId + index;
                $('#' + prevId).focus();
            }
            else if(event.keyCode == 38)
            {
                upId = upId + (index - 1);
                $('#' + upId).focus();
            }
            else if(event.keyCode == 40)
            {
                downId = downId + (index + 1);
                $('#' + downId).focus();
            }
            else if(event.keyCode==13)
            {
                if (nextId == "desc") {
                    nextId = "quantity" + index;
                    $('#' + nextId).focus();
                }
                else if(nextId == "uom")
                {
                    nextId = "stkid" + (index + 1);
                    $('#' + nextId).focus();
                }
            }
        };

Answer 3

Based on the answer by wolcy97 but using only angular

 /** Usage:
  <input next-focus tabindex="0">
  <input next-focus tabindex="1">
  <input tabindex="2">
  Upon pressing ENTER key the directive will switch focus to
  the next tabindex.
  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, 
**/ 
 app.directive('nextFocus', [function() {
  return {
    restrict: 'A',
    link: function(scope, elem, attrs) {
      elem.bind('keydown', function(e) {
        var code = e.keyCode || e.which;
        if (code === 13) {
          e.preventDefault();
          try {
            if (attrs.tabindex !== undefined) {
              var currentTabeIndex = attrs.tabindex;
              var nextTabIndex = parseInt(currentTabeIndex) + 1;
              var elems = document.querySelectorAll("[tabindex]");
              for (var i = 0, len = elems.length; i < len; i++) {
                var el = angular.element(elems[i]);
                var idx = parseInt(el.attr('tabindex'));
                if (idx === nextTabIndex) {
                  elems[i].focus();
                  break;
                }
              }
            }
          } catch (e) {
            console.log('Focus error: ' + e);
          }
        }
      });
    }
  };
}]);

Answer 4

I suggest making a custom directive. Something like this. I haven't tested this.

.directive('focus', function() {
  return {
    restrict: 'A',
    link: function($scope,elem,attrs) {

      elem.bind('keydown', function(e) {
        var code = e.keyCode || e.which;
        if (code === 13) {
          e.preventDefault();
          elem.next().focus();
        }
      });
    }
  }
});

Something like that should work. You might have to tweek something. Good luck.

Answer 5

On Enter press it moves to next element of DOM, but element requires id to set focus

starter.directive('focustonext', 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') {                               
                            document.getElementById(pe.id).focus();
                            break;
                        }
                    } else if (pe === elem) {
                        focusNext = true;
                    }
                }
            }
        });
    }
   }
});

Thanks all..

Answer 6

  <table class="table table-striped table-bordered table-hover">
                                        <tr>
                                            <th>S No</th>
                                            <th>Stock Id</th>
                                            <th>Description</th>
                                            <th>Qty</th>
                                            <th>UOM</th>
                                            <th>Rate</th>
                                            <th>Amount</th>

                                            <th>Add</th>
                                            <th>Delete</th>
                                        </tr>
                                        <tr ng-repeat="item in stockitems">
                                            <td>{{$index + 1}}</td>
                                            <td>

                                                <input type="text" style="width:70px" id="stkid{{$index}}" class="form-control" name="stockid" required insert="Addnewrow();" ng-keyup="moveFocus('desc','amount','stkid','stkid',$index,$event)" ng-blur="getStockitem($index);" typeahead="a.stockitem_code as (a.stockitem_code +' | ' + a.stockitem_name +' | '+ a.rate) for a in stock | filter:$viewValue | limitTo:8" data-ng-model="item.stockid" rows="3" />
                                            </td>
                                            <td>

                                                <input type="text" class="form-control" id="desc{{$index}}" name="description" ng-keyup="moveFocus('quantity','stkid','desc','desc',$index,$event)" data-ng-model="item.description" rows="3" />
                                            </td>
                                            <td>

                                                <input type="text" style="width:70px" id="quantity{{$index}}" class="form-control" ng-keyup="moveFocus('uom','desc','quantity','quantity',$index,$event)" ng-change="GetAmount($index,'qty');" ng-pattern="/^\d+$/" required name="qty" data-ng-model="item.qty" rows="3" />
                                            </td>
                                            <td>

                                                <input type="text" style="width:70px" id="uom{{$index}}" class="form-control" name="uom" ng-keyup="moveFocus('rate','quantity','uom','uom',$index,$event)" data-ng-model="item.uom" required rows="3" />
                                            </td>
                                            <td>


                                                <input type="text" style="width:70px" id="rate{{$index}}" class="form-control" name="rate" ng-keyup="moveFocus('amount','uom','rate','rate',$index,$event)" required data-ng-model="item.rate" ng-pattern="/^\d{0,9}(\.\d{1,9})?$/" ng-change="GetAmount($index,'rate');" rows="3" />
                                            </td>
                                            <td>

                                                <input type="text" style="width:70px" id="amount{{$index}}" class="form-control" ng-keyup="moveFocus('stkid','rate','amount','amount',$index,$event)" name="amount" required data-ng-model="item.amount" rows="3" />
                                            </td>

                                            <td><span ng-click="AddEstimation($index);"><a>Add</a></span></td>
                                            <td><span ng-click="DeleterowEstimation($index);"><a>Delete</a></span></td>
                                        </tr>
                                    </table>