如何捕获删除输入值的b-form-input事件

Posted 2023-02-22

【中文标题】如何捕获删除输入值的b-form-input事件

【英文标题】：How to catch the b-form-input event that deletes the input value

【发布时间】：2021-04-25 21:34:49

【问题描述】：

我已经尝试过自己并进行了广泛的搜索，以了解如何捕获在“搜索”类型的 b-form-input 中单击 x 图标时触发的事件：

模板：

<b-form-input
    id="filter-input"
    type="search"
    v-model="filter"
    @keydown.enter="onFilterChange(filter)"
    @emptied.native="resetFilter(emptiedEvent)"
/>

脚本：

public resetFilter(event: any) 
  console.log("todo: resetFilter");

我尝试了不同的事件处理程序：@emptied、@reset、@close、@cancel、@drop...它们似乎都没有触发。 我错过了什么？ Bootstrap Vue 中可能没有？ docs 没有帮助。 是唯一使用标准@change事件（检查输入值是否被清空）的方法吗？

【问题讨论】：

删除图标...是您创建的自定义图标

@Amaarrockz 不，我没有，我会提到的。查看文档，所有搜索输入都会显示它 - 这是一个 html5 功能：developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search

【参考方案1】：

您不应使用的非标准 search 事件

当您单击x 时，HTML5 search input 确实会发出 非标准 search event，但不幸的是，当您按 Enter 时，它也会发出，所以您必须检查处理程序中的文本值以确定输入是否已清除。

改用input 或change 事件

但我建议使用 input 或 change 代替，如果这适合您的目的，因为来自 MDN 文档的警告：

此功能是非标准的，不在标准轨道上。不要在面向 Web 的生产站点上使用它：它不适用于每个用户。实现之间也可能存在很大的不兼容性，并且行为可能会在未来发生变化。

<b-form-input
    id="filter-input"
    type="search"
    v-model="filter"
    @keydown.enter="onFilterChange(filter)"
    @search="resetFilter"
/>

resetFilter() 
  if(!this.filter) 
    console.log('search cleared')
  

请注意，当您在空输入上按 Enter 时也会触发此操作。

【讨论】：

@Dan 谢谢，但我似乎无法找到专门关于“搜索”事件的信息，那里。它只声明了两个事件：'change' 和 'input'。对不起..

试试这个：developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/…

也找到了：-D "当前的 UA 实现 有一个额外的控件来清除字段。使用这个控件也会触发搜索事件。在这种情况下，值 元素将是空字符串。” Docs