Move focus to next control on key Enter

Question

I have found some project on Angular 1.x where user can move focus to next control by pressing Enter key.

'use strict';
app.directive('setTabEnter', function () {

    var includeTags = ['INPUT', 'SELECT'];

    function link(scope, element, attrs) {
        element.on('keydown', function (e) {
            if (e.keyCode == 13 && includeTags.indexOf(e.target.tagName) != -1) {
                var focusable = element[0].querySelectorAll('input,select,button,textarea');
                var currentIndex = Array.prototype.indexOf.call(focusable, e.target)
                var nextIndex = currentIndex == focusable.length - 1 ? 0 : currentIndex + 1;

                if (nextIndex >= 0 && nextIndex < focusable.length)
                    focusable[nextIndex].focus();

                return false;
            }
        });
    }

    return {
        restrict: 'A',
        link: link
    };
});

But this does not work for Angular 2. How can I set focus on next control on Enter keypress in Angular 2?

Sounds similar to http://stackoverflow.com/questions/40886012/how-to-navigate-focus-to-the-next-item-in-angular2/40886144#40886144 — Günter Zöchbauer, Dec 22 '16 at 12:56

score 11 · Answer 1 · answered Dec 22 '16 at 13:00

11

import { Directive, ElementRef, HostListener, Input } from'@angular/core';
@Directive({
    selector: '[onReturn]'
})
export class OnReturnDirective {
    private el: ElementRef;
    @Input() onReturn: string;
    constructor(private _el: ElementRef) {
        this.el = this._el;
    }
    @HostListener('keydown', ['$event']) onKeyDown(e) {
        if ((e.which == 13 || e.keyCode == 13)) {
            e.preventDefault();
            if (e.srcElement.nextElementSibling) {
                e.srcElement.nextElementSibling.focus();
            }
            else{
                console.log('close keyboard');
            }
            return;
        }

    }

}

Hope it will help you !

answered Dec 22 '16 at 13:00

ani5ha

386
4
7

@AkshayKhale you can try this http://stackoverflow.com/questions/43445507/using-angular-2-focus-on-next-input-field-with-enter-key-press/43451032#43451032 – sandip kakade Apr 18 '17 at 06:34
My issue on page reload focus() is not working.. https://stackoverflow.com/questions/47949110/page-refresh-enter-arrow-keys-not-working-in-table-cells – Ziggler Dec 26 '17 at 16:48
it work perfectly, exactly what i need, thank you so much – Hiep Tran Mar 25 '18 at 06:53
will this be worked inside IOS app (e.srcElement.nextElementSibling.focus()) , I have used it but it didn't worked inside IOS app, it worked in all the browser but not inside IOS app. – Asim Sajjad Apr 22 '19 at 05:46

tdav · Answer 2 · 2016-12-24T11:04:50.390

import { Directive, ElementRef, HostListener, Input, Renderer } from '@angular/core';
@Directive({
    selector: '[onReturn]'
})
export class OnReturnDirective {    
    private el: ElementRef;   
    @Input() onReturn: string;
    constructor(private _el: ElementRef,public renderer: Renderer) {
        this.el = this._el;
    }  
    @HostListener('keydown', ['$event']) onKeyDown(e:any) {
        if ((e.which == 13 || e.keyCode == 13)) {
            e.preventDefault();
            let control:any;
            control = e.srcElement.nextElementSibling;
            while (true){                
                if (control) {
                  if ((!control.hidden) && 
                     (control.nodeName == 'INPUT' || 
                      control.nodeName == 'SELECT' || 
                      control.nodeName == 'BUTTON' || 
                      control.nodeName == 'TEXTAREA'))
                     {
                            control.focus();
                            return;
                        }else{
                            control = control.nextElementSibling;
                        }                         
                }
                else {
                    console.log('close keyboard');
                    return;
                }            
            }
        }
    } 
}

My issue on page reload focus() is not working.. https://stackoverflow.com/questions/47949110/page-refresh-enter-arrow-keys-not-working-in-table-cells — Ziggler, Dec 26 '17 at 16:51
if on a form inputs are wrap inside individual bootstrap 'form-row' or 'col-..' divs code above not working since using .nextElementSibling.any fix? — mrapi, Jun 19 '18 at 16:35

score 0 · Answer 3 · answered Apr 28 '22 at 08:07

import { Directive, ElementRef, HostListener, Input } from "@angular/core";

@Directive({
    selector: "[onReturn]"
})
export class OnReturnDirective {
    constructor() {}
    @HostListener("keydown", ["$event"]) onKeyDown(e: {
        which: number;
        keyCode: number;
        shiftKey: boolean;
        preventDefault: () => void;
        srcElement: {
            nextElementSibling: { focus: () => void };
            previousElementSibling: { focus: () => void };
        };
    }) {
        if (e.which == 13 || e.keyCode == 13) {
            e.preventDefault();
            let control: any;
            if (e.shiftKey == true) {
                control = e.srcElement.previousElementSibling;
                ControlElement(control, true);
            } else {
                control = e.srcElement.nextElementSibling;
                ControlElement(control, false);
            }
        }

        function ControlElement(control: any, IsPrevious: boolean) {
            while (true) {
                if (control) {
                    if (
                        !control.hidden &&
                        (control.nodeName == "INPUT" ||
                            control.nodeName == "SELECT" ||
                            control.nodeName == "BUTTON" ||
                            control.nodeName == "TEXTAREA")
                    ) {
                        control.focus();
                        return;
                    } else {
                        if (IsPrevious == true) {
                            control = control.previousElementSibling;
                        } else {
                            control = control.nextElementSibling;
                        }
                    }
                } else {
                    console.log("close keyboard");
                    return;
                }
            }
        }
    }
}

Move focus to next control on key Enter

3 Answers3

Linked

Related