typescript 将焦点移至 Enter 键上的下一个控件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41283650/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-21 04:06:38 来源:igfitidea点击:
Move focus to next control on key Enter
提问by tdav
I have found some project on Angular 1.x where user can move focus to next control by pressing Enter key.
我在 Angular 1.x 上找到了一些项目，用户可以通过按 Enter 键将焦点移动到下一个控件。
'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?
但这对 Angular 2 不起作用。如何在 Angular 2 中将焦点设置在 Enter 按键上的下一个控件上？
回答by ani5ha
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 !
希望它会帮助你！
回答by tdav
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;
}
}
}
}
}
