Change focus to input on a key event in AngularJS

Question

Test case: http://jsbin.com/ahugeg/4/edit (Slightly long)

In the above test case, I have three input elements, generated by ng-repeat directive. My intention in this test case, is that hitting the up/down arrows in one of these inputs should move focus to the input in the corresponding direction, if there is an input available in that direction.

I am new to AngularJS, so I might be missing on some straightforward way to do this. Anyway, I defined two new directives (on-up and on-down), to handle the up and down events and am calling the $scope.focusNext and $scope.focusPrev methods, passing the correct entry, relative to which the focus should move. This is where I am stuck.

I know it is not the angular-way to deal with DOM elements in controllers, but I can't see how the focus can be seen as an attribute/property of a model. I even thought of having a separate $scope.focusedEntry, but then should I watch for changes on that property? Even if I do and I detect changes, how can I access the input element corresponding to the entry I want focused?

Any help on how this should be done are very much appreciated.

Jay · Accepted Answer · 2013-02-09 00:35:55Z

16

I just wrote this up and tested it briefly - it does what you want without all the extra clutter in your controller and in the HTML. See it working here.

HTML:

<body ng-controller="Ctrl">
    <input ng-repeat="entry in entries" value="{{entry}}" key-focus />
</body>

Controller:

function Ctrl($scope) {
  $scope.entries = [ 'apple', 'ball', 'cow' ];
}

Directive:

app.directive('keyFocus', function() {
  return {
    restrict: 'A',
    link: function(scope, elem, attrs) {
      elem.bind('keyup', function (e) {
        // up arrow
        if (e.keyCode == 38) {
          if(!scope.$first) {
            elem[0].previousElementSibling.focus();
          }
        }
        // down arrow
        else if (e.keyCode == 40) {
          if(!scope.$last) {
            elem[0].nextElementSibling.focus();
          }
        }
      });
    }
  };
});

answered Feb 9, 2013 at 0:35

Jay

20k11 gold badges56 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sharat87 Over a year ago

Thank you. Your solution gave me the idea and motivation to work on my own. I took a slightly different approach, defining a directive on the parent of ng-repeated element, that takes the selector of inputs on which focus is to be moved. I'll post my solution in a minute. Thanks again.

koolunix · Accepted Answer · 2013-02-08 23:49:01Z

6

I had a similar problem and used this simple directive. It works as ng-show and ng-hide would- only with focus, if it's attribute resolves as true:

.directive('focusOn',function() {
    return {
        restrict : 'A', 
        link : function($scope,$element,$attr) {
            $scope.$watch($attr.focusOn,function(focusVal) {
                if(focusVal === true) {
                    setTimeout(function() {
                        $element.focus();
                    },50);
                }
            });
        }
    }
})

answered Feb 8, 2013 at 23:49

koolunix

1,99516 silver badges25 bronze badges

2 Comments

sharat87 Over a year ago

Hah! Nice and simple solution.Thank you very much.

shapeshifter Over a year ago

Great solution. You need to check focusVal more thoroughly. ng-show and ng-hide use toBoolean(value) which unfortunately is a private angular function. I moved this to a service and call Boolean.toBoolean(focusVal) === true.

sharat87 · Accepted Answer · 2013-02-09 05:45:57Z

4

Inspired by @Trevor's solution, here's what I settled on,

app.directive('focusIter', function () {

    return function (scope, elem, attrs) {
        var atomSelector = attrs.focusIter;

        elem.on('keyup', atomSelector, function (e) {
            var atoms = elem.find(atomSelector),
                toAtom = null;

            for (var i = atoms.length - 1; i >= 0; i--) {
                if (atoms[i] === e.target) {
                    if (e.keyCode === 38) {
                        toAtom = atoms[i - 1];
                    } else if (e.keyCode === 40) {
                        toAtom = atoms[i + 1];
                    }
                    break;
                }
            }

            if (toAtom) toAtom.focus();

        });

        elem.on('keydown', atomSelector, function (e) {
            if (e.keyCode === 38 || e.keyCode === 40)
                e.preventDefault();
        });

    };
});

This defines an attribute focus-iter to be set on the parent element of all the repeated inputs. See this in action here: http://jsbin.com/ahugeg/10/.

The advantage over @Trevor's is that I can set an arbitrary selector for the value of focus-iter attribute to specify exactly which elements the focus jumping should work with. As a crazy example, try setting focus-iter attribute to input:even :). This helps since in my application, the inputs come with quite a bit of extra markup around them, unlike the test case.

answered Feb 9, 2013 at 5:45

sharat87

7,55612 gold badges57 silver badges81 bronze badges

3 Comments

Jay Over a year ago

That's actually pretty neat what you did there. I like how basically anything works such as focus-iter="form>*".

sharat87 Over a year ago

Thanks. Or even focus-iter="[key-focus]", when the inputs have key-focus attribute like the markup in your answer :)

Thant Zin Over a year ago

can help me with input inside table cell ?

Collectives™ on Stack Overflow

Change focus to input on a key event in AngularJS

3 Answers 3

1 Comment

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related