Angular 2 输入框选中时触发事件

Question

我想知道在Angular中是否有任何事件在选中输入时发生，(select) 当我用鼠标点击输入时不起作用(只有通过tab键才能选中)

HTML:

<div (seeked)="setFocus($event.target.name)">
// I tried (focus) (select) (input) (click)<-this one is closest
<input type="text" name="input1">
<input type="text" name="input2">
</div

我正在使用Angular 2.4.1进行开发。

- Jędrek Markowski

---

请添加您尝试过的代码。 - Nehal

Answer 1

您可以使用事件的焦点事件：

<input type="text" (focus)="focusFunction()" (focusout)="focusOutFunction()"/>

请查看此链接：如何使用Angular 2处理HTML5事件(onfocus和onfocusout)

- Nour

---

谢谢，我想避免在每个输入上使用事件，但我看到我必须这么做。 - Jędrek Markowski

如果您有共享功能，想要在每个输入框获得焦点时添加它，您可以创建一个指令并在每个输入框上使用它。 - Nour

是的，但那样我就无法将其输出到其他组件，只能输出到发生事件的组件。 - Jędrek Markowski

当您创建指令时，可以将其导入并在任何组件中使用。请查看文档链接：https://angular.io/api/core/Directive - Nour

Answer 2

你应该使用 "change" 事件。

onChangeDepartment() {
    console.log("select event");
  }

 <md-select name="department" [(ngModel)]="reportFilter.department" #departmentTemp="ngModel" (change)="onChangeDepartment()"
          required>
          <md-option *ngFor="let department of departments" [value]="department">{{department.name}}</md-option>
        </md-select>

- Elvin Garibzade

Answer 3

对于文本类型的输入：(focus)="functionToCall()"

- elzoy

Answer 4

你可以使用Angular事件绑定来响应任何 DOM事件。许多DOM事件都由用户输入触发。绑定到这些事件提供了一种从用户获取输入的方法。

要绑定到DOM事件，请在括号中包含DOM事件名称并将引用的模板语句分配给它。

  <input type="text" (focus)="myOnFocus($event)">

来源

如果您想避免绑定每个输入事件，创建一个指令并将其附加到所有输入元素会更容易/更简洁，请查看此答案。

- Anas Al Hamdan