Question

我正试图通过@HostListener捕捉焦点事件。但它对我来说效果不好。

我在下面看了一篇文章。

HTML5 event handling(onfocus and onfocusout) using angular 2

还看到文章上出现了一个龙头。

http://plnkr.co/edit/0K1nxX2ltZ4ztfe5uJ6E?p=preview

它对我有用。但是我把它改成了如下，那就不行了。

@Component({
    selector: 'my-app',
    template: `<input name="date" type="text" (focus)="focusFunction()" (focusout)="focusOutFunction()">` 
})
export class App {
    @HostListener('focus', ['$event.target'])
    onFocus(target: any) 
        console.log("Focus called from HostListener");
        target.type = 'date';
    }
    @HostListener('focusout', ['$event.target'])
    onFocusout(target: any) {
        console.log("Focus out called from HostListener");
        target.type = 'text';
    }

    focusOutFunction(){
        console.log("Focus out called");
    }
    focusFunction(){
        console.log("Focus called");
    }
}

关于焦点，它们都被调用。但焦点（focusin）仅适用于focusFunction，而不适用于@HostListener的焦点。

如何使@HostListener适用于焦点事件？

Answer 1

那是因为@HostListener将一个监听器附加到主机元素。在这种情况下，您的host元素是<my-app></my-app>元素。当您在<input>元素内聚焦时，焦点事件不会冒泡到其父元素。此外，只有某些元素实际上可以触发focus事件，而my-app元素不是其中之一。

您发布的示例使用了@Directive个<input>元素。这显然可以在指令上监听焦点事件。

但是，您可以通过将(focus)设置为属性来使自定义元素触发tabindex="0"事件。

Answer 2

使用模糊代替焦点 HostListener

@HostListener('blur') onblur() { ....... ....... }

Answer 3

对于那些拼命检查代码中的错误并找不到错误的人。

请注意，焦点事件将在tabindex设置为某些内容的块元素上调度。这与模板和组件中的(event)侦听器都通过@HostListener()。

Angular2 - @HostListener（'focus'）不起作用

3 个答案: