时间戳

首页 > 解决方案 > 单击 div 内的输入时调用 angular div (clickOutside)

javascript - 单击 div 内的输入时调用 angular div (clickOutside)

问题描述

我在 div 中使用 (clickOutside) 指令，当我单击 div 内的输入元素时调用它。

<div class="col-4 align-self-center" (click)="setMethod(true)"
     (clickOutside)="setMethod(false)" >
    <button type="button" mat-raised-button color="accent" >
        <input type="text"
               class="form-control"
               *ngIf="activeTitle"
               [(ngModel)]="title" />
    </button>
</div>

标签： javascripthtmlcssangular

解决方案

您可以绑定到(blur)事件而不是使用(clickOutside)。也许这对你有用？

请注意，当组件失去焦点时会触发 blur 事件。这意味着为了触发模糊，首先需要对 HTML 元素进行聚焦。例如，用户必须用鼠标点击它。当用户单击该元素内部的任何位置时，您可以调用该元素上的focus()方法，从而确保当元素失去焦点时会触发模糊。

例如：

<div
    class="col-4 align-self-center"
    (click)="setMethod(true)"
    (blur)="setMethod(false)"
>
    <button
        type="button"
        mat-raised-button color="accent"
    >
        <input
            type="text"
            class="form-control"
            *ngIf="activeTitle"
            [(ngModel)]="title"
        />
    </button>
</div>

推荐阅读