将焦点移至Enter键上的下一个控件 [英] Move focus to next control on key Enter

问题描述

我在Angular 1.x上找到了一些项目，用户可以通过按Enter键将焦点移动到下一个控件。

 'use strict'; 
 app.directive（'setTabEnter'，function（）{
 
 var includeTags = ['INPUT'，'SELECT']; 
 
函数链接（范围， （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 
}; 
}）; 
  

但是这对Angular 2不起作用。我怎样才能将焦点放在Enter键的下一个控件上Angular 2？

解决方案>

 从@中导入{Directive，ElementRef，HostListener，Input}角/芯'; 
 @Directive（{
 selector：'[onReturn]'
}）
导出类OnReturnDirective {
 private el：ElementRef; 
 @Input（）onReturn：string; 
构造函数（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; 
} 
 
} 
 
} 
  

<希望它能帮助你！

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?

解决方案

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 !

这篇关于将焦点移至Enter键上的下一个控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！