如何在输入类型搜索中检测到单击取消“x”？答案

【问题标题】：How can I detect a click on the cancel "x" in the input type search?如何在输入类型搜索中检测到单击取消“x”？
【发布时间】：2020-07-01 22:58:24
【问题描述】：

我的 Angular Web 应用中有一个搜索输入类型。

<div class="input-group mb-4">
        <div class="input-group-prepend">
          <span class="input-group-text"><i class="fa fa-search fa-fw"></i></span>
        </div>
        <input class="form-control" type="search" placeholder="" [(ngModel)]="searchTerm" (keydown.enter)="search($event.target.value)" (cancel)="onCancelSearch()" >
      </div>

输入搜索词时会出现一个“x”。我想检测点击那个“x”。我试过了

(cancel)="onCancelSearch()"

但这对我不起作用。如何检测取消点击？

【问题讨论】：

这个“x”是从哪里来的？你在使用 twitter 引导程序吗？
@GabrielMartins 它由“搜索”输入元素提供：developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search
您可能可以使用 onchange 事件来检测值何时为零长度，从而知道搜索已被取消。但我没试过这个
@GabrielMartins “x”是标准搜索输入类型的一部分。

标签： angular input

【解决方案1】：

我能够像这样使用 ngModelChange 触发搜索函数调用，

<input class="form-control" type="search" placeholder="" [(ngModel)]="searchTerm" (ngModelChange) = "search()">

在搜索功能中，我能够检查 searchTerm 并检测它是否被清除。

【讨论】：

这是正确的 ?? 但是每次更改都会触发 ngModelChange，例如当您输入 a,ab,abc 时，您可能需要小心以防发送 http 请求