Using the enter key as tab using only angularjs and jqlite

Asked 9/10, 2014 at 12:41 Answered 27/9, 2016 at 0:38

I have looked at multiple threads and tried a vast variety of solutions. Quite frankly I think I am losing my mind.

I have an ng-repeat with inputs. All that needs to happen is that when the user presses enter, it should shift focus to the next input, basically simulating the tab key functionality.

The code (incomplete): HTML:

<body ng-app="ap" ng-controller="con"> 
<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr ng-repeat='person in persons'>
        <td>
            <input type='text'
                name="personName"
                ng-model="person.name" 
            />
        </td>
        <td>
            <input type='number'
                name="personName"
                ng-model="person.age" 
                enter-as-tab
            />
        </td>
    </tr>
</table>

JS:

    var app = angular.module("ap", []);

app.controller("con", function ($scope) {

    $scope.persons = [
        { name: 'Susan', age: 1 }, 
        { name: 'Peter', age: 1 },
        { name: 'Jack', age: 2 }
    ];
});

app.directive('enterAsTab', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if(event.which === 13) {
                event.preventDefault();
                // Go to next age input                        
            }
        });
    };
});

Here is a link to the fiddle: fiddle

Glyconeogenesis answered 9/10, 2014 at 12:41 Comment(2)

What solutions have you tried already? – From 9/10, 2014 at 12:54

I removed the code from the fiddle, so I don't have a reference to them any more, but this is basically what I am trying to achieve: link – Glyconeogenesis 9/10, 2014 at 12:55

Ok, so I figured it out. Wasn't that difficult after all. Just got caught up in the whole "don't think jQuery while using Angular" mindset.

Here is the directive that I implemented:

app.directive('enterAsTab', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if(event.which === 13) {
                event.preventDefault();
                var elementToFocus = element.next('tr').find('input')[1];
                if(angular.isDefined(elementToFocus))
                    elementToFocus.focus();
            }
        });
    };
});

Here is the link to the working fiddle: enter-as-tab

Glyconeogenesis answered 10/10, 2014 at 9:34 Comment(0)

Starting from @avn's solution I made some changes to find recursively and focus to the next input text or input number, but only if the value is valid, or send the form. Was designed for ionic forms but could be adapted for any angular forms:

app.directive('enterAsTab', function () {
  return {
    restrict: 'A',
    require:  '^ngModel',
    link: function (scope, element, attrs, ctrl) {
      element.bind("keydown keypress", function (event) {

        function isKeyEnterAndValid(){
          return event.which === 13 && ctrl.$valid;
        }

        function nextItem(div, tag){
          var next = div.next(tag);
          if (!next) return nextItem(div, 'label');
          return next;
        }

        function isTypeTextOrNumber(input){
          return ['text', 'number'].indexOf(input.attr('type')) === -1;
        }

        function findInput(div){
          var next = nextItem(div, 'div');
          if (!next) return;
          var input = next.find('input');
          if (!input || isTypeTextOrNumber(input)){
            return findInput(next);
          }
          return input[0];
        }

        if(isKeyEnterAndValid()) {
          var nextInput = findInput(element.parent());
          if(angular.isDefined(nextInput)){
            event.preventDefault();
            nextInput.focus();
          }
        }

      });
    }
  };
});

Herbartian answered 27/9, 2016 at 0:38 Comment(0)

Recommended topics

Hot tags