将焦点移到键 Enter 上的下一个控件

Posted 2023-03-05

【中文标题】将焦点移到键 Enter 上的下一个控件

【英文标题】：Move focus to next control on key Enter

【发布时间】：2017-05-08 02:37:03

【问题描述】：

我在 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
    ;
);

但这不适用于 Angular 2。如何将焦点设置在 Angular 2 中 Enter 按键上的下一个控件上？

【问题讨论】：

听起来类似于***.com/questions/40886012/…

请分享您的 Angular2 代码。

【参考方案1】：

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;
        

    

希望对你有帮助！

【讨论】：

@AkshayKhale 你可以试试这个***.com/questions/43445507/…

我在页面重新加载焦点（）上的问题不起作用..***.com/questions/47949110/…

完美运行，正是我需要的，非常感谢

这将在 ios 应用程序中工作吗 (e.srcElement.nextElementSibling.focus()) ，我已经使用它但它在 IOS 应用程序中没有工作，它在所有浏览器中工作但不在内部IOS 应用程序。

【参考方案2】：

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;
                            
            
        
     

【讨论】：

为此您创建单独的指令@tdav

我在页面重新加载焦点（）上的问题不起作用..***.com/questions/47949110/…

如果表单上的输入包含在单独的引导程序“form-row”或“col-..”divs 代码中，因为使用 .nextElementSibling.any 修复后无法正常工作？