Angular：如果单击按钮，防止输入字段模糊答案

【问题标题】：Angular: Prevent blur of input field if button is clickedAngular：如果单击按钮，防止输入字段模糊
【发布时间】：2020-10-08 07:14:37
【问题描述】：

所以，我有一个文本搜索的输入字段。它可以通过按回车或单击按钮来触发。现在我想添加一个功能，如果你输入“ABC”，按回车，它会触发然后搜索；然后当你添加几个字符（例如“123”所以你得到“ABC123”）但离开输入字段而不按回车时，我想将输入字段的内容恢复为“ABC”，以显示最后一个搜索词的用户。

我已经在文本输入上使用 (blur)="resetInput()" 实现了这一点，但是问题是如果用户单击按钮（在将“123”添加到“ABC”之后），模糊将触发为好吧，这会导致输入被重置（到“ABC”），然后搜索被执行（使用“ABC”而不是“ABC123”）。

我了解到这是由于执行单击和模糊的顺序造成的，您可以通过使用 mousedown 而不是单击按钮来规避这种情况，但这会改变页面的行为，因为搜索将在鼠标按下而不是鼠标向上时执行（如果您使用 (click) 事件会发生这种情况）

有没有替代方案？

【问题讨论】：

添加您尝试过的代码@jake-castle
尝试使用(change)="resetInput()"

标签： javascript angular typescript

【解决方案1】：

如果您可以在很短的时间内重置模糊值，这可能是一种解决方法。

searchClicked = false;

// Handles the Search Button Click
handleSearchClick() {
 this.searchClicked = true;
 setTimeout(() => {
   this.searchClicked = false;
 }, 150);
 // code to invoke the search
}


resetInput() {
 setTimeout(() => {
  if (!searchClicked) {
   // reset here
  }
 }, 100);
}

【讨论】：

【解决方案2】：

谢谢大家的回答，我现在已经通过在 mouseDown 上调用 event.preventDefault() 来解决它，这将阻止模糊事件并允许使用未更改的输入文本执行 (click) 事件。

【讨论】：