javascript - Angular：如果点击按钮则防止输入框失焦

所以，我有一个用于文本搜索的输入框。它可以通过按回车键或点击按钮触发。现在我想添加一个功能：如果你输入“ABC”，按回车，它会触发搜索；然后当你添加几个字符（例如“123”，这样你就得到“ABC123”）但没有按回车离开输入框时，我希望将输入框的内容恢复为“ABC”，以向用户显示这是最后一次的搜索词。

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

我读到这是由于 click 和 blur 执行顺序的原因，并且你可以通过在按钮上使用 mousedown 而不是 click 来绕过这个问题，但那会改变页面的行为，因为搜索会在鼠标按下时执行，而不是在鼠标抬起时执行（如果你使用 (click) 事件，就会是在鼠标抬起时执行）。

对此有替代方案吗？

答案＃1

感谢大家的回答，我现在已经解决了，通过在 mouseDown 上调用 event.preventDefault()，它将阻止 blur 事件并允许 (click) 事件在输入文本未更改的情况下被执行。

答案＃2

如果你可以接受在失去焦点时重置值有一个非常短的延迟，这可能是一个解决方法。

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);
}