Angularjs - next input on keypress

Question

I've been trying to implement a directive that watch everytime the user hit the keyboard.

I have four different inputs and each of them receives a single character and the user should fill the next form

I wrote a directive for this but it doesn't work

here's my code:

JS:

var app = angular.module('app', []);
app.directive('focus', function() {
  return {
    restrict: 'A',
    link: function($scope,elem,attrs) {

      elem.bind('keydown', function(e) {
         elem.next().focus();

      });
    }
  }
})

HTML:

<div ng-app="app">
    <form>
        <input  focus type="text"   /> 
        <input  focus type="text"   /> 
        <input focus type="text"   />
    </form>
</div>

Jsfiddle : http://jsfiddle.net/Y2XLA/109/

very similar question: angularjs move focus to next control on enter

Probably it's something simple but I'm not getting it right

Thanks a lot!

score 1 · Accepted Answer · answered May 20 '15 at 21:37

1

Solution is quite simple, just add a [0] after the .next():

    elem.bind('keydown', function (e) {
        elem.next()[0].focus();
    });

But you prbly want to use keyup instead of keydown, so you enter the value to the old input field before switching to the next one. Updated fiddle: http://jsfiddle.net/Y2XLA/110/

You should also add some handling for the case that elem.next() is not an input field.

answered May 20 '15 at 21:37

Numyx

1,758
2
11
16

I would recommend using jquerys focus method. The reason it doesn't exist in the code is because only jqLite is being loaded instead of full jQuery. – Tahsis Claus May 20 '15 at 21:40
@numyx i tried the fiddle, it leaves the first input blank (text gets added to the next input field) hrrm? – Shehryar Abbasi May 20 '15 at 21:47
@Shehryar that what i said about `keyup` and `keydown` ;) Just wanted to change as few as possible of the original code. – Numyx May 20 '15 at 21:48
@numyx cool , i tried it with `keyup` and it works great. might want to update your fiddle. and this should be the accepted answer. – Shehryar Abbasi May 20 '15 at 21:52
@TahsisClaus idk if I understood correctly, but I can't use jquery since I'm developing an ionic app (hybrid app). Numyx Thanks a lot it worked perfectly, but could you explain why the " [0] " ? I'm new to custom directives and it doesn't make much sense to me =( – SupimpaAllTheWay May 20 '15 at 22:29
`elem` and `elem.next()` are jqLite objects (https://docs.angularjs.org/api/ng/function/angular.element). jqLite is a subset of jQuery use for AngularJs but doesn't support a `focus()` method, so `elem.next().focus()` is not working. The "[0]" gives you the DOM element without the jqLite wrapper and naturally has a `focus()` method (http://www.w3schools.com/jsref/met_html_focus.asp). – Numyx May 20 '15 at 23:02

score 1 · Answer 2 · answered Apr 30 '16 at 22:01

Create custom directive:

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

Angularjs - next input on keypress

2 Answers2