Question

如何使用Angular 2（4,5,6,7）为<input type="search">的十字图标绑定事件？哪个事件被触发？

寻找类似的解决方案（除了（搜索），因为它在IE中不起作用）：

<input type="search" (click)="search()">

其他问题：这个十字图标的官方名称是什么？有点困难谷歌搜索/ duckduckgoing解决方案不知道正确的条款？

重复问题：How do you detect the clearing of a "search" HTML5 input?

Answer 1

 <input type="search" (search)="search()">

Answer 2

有多种方法将搜索事件与组件绑定

1）使用更改事件

<input type="search" class="form-control" placeholder="Search" (change)="onSearchCustomer($event)">
// This event get fired when you type something and hit enter, but if you 
// again hit enter without adding a new input it won't get fired. 
//(i.e It fires only when the content changes and mean while enter is pressed)

2）使用搜索事件

<input type="search" class="form-control" placeholder="Search" (search)="onSearchCustomer($event)">
// This event is fired whenever enter is pressed.(i.e without caring about the change of content)

3）使用键入事件

<input type="search" class="form-control" placeholder="Search" (keyup)="onSearchCustomer($event)">
// This event is fired on every key press

4）使用keyup.enter事件

<input type="search" class="form-control" placeholder="Search" (keyup.enter)="onSearchCustomer($event)">
// This event is similar to search event which only fires when enter is pressed

现在在您的组件文件中

onSearchCustomer(event: any) {
   console.log(event.target.value);
}

希望这对您或其他人有帮助！

Answer 3

<input type="search" placeholder="Search for text" #searchInput (keyup)="search(searchInput.value)" (search)="search()">

输入（type =“search”）交叉图标的角度事件绑定？

3 个答案: