javascript - 如何使用 vue 检查击键模糊?
问题描述
在vue文档中没有明确说明,我在网上也没有找到任何类似的问题,所以我在这里问它。
我需要一个 vue 文本输入来返回最后一次击键是什么。与 blur 事件相关的方法包含一个数据对象,因此我无法捕获默认事件对象。我尝试使用自定义键功能,但模糊总是在它们之前触发,因此执行顺序错误。
在下面的示例中,“abcdef”是绑定到输入控件的数据对象。(我删除了 < > 符号,因为 stackoverflow 无法解析它。)
<input
type="text"
v-model="abcdef.amount"
@keyup.esc="cancelChange()"
@keyup.enter="saveValue(abcdef)"
@keyup.tab="saveValue(abcdef)"
@focus="saveOriginalAmount(abcdef)"
@blur="revertOriginalAmount(abcdef)">
在我的 Vue 方法中
methods: {
cancelChange(): {} //Triggers revertOriginalAmount
saveValue(obj): {} //Save value
saveOriginalAmount(): {} //Save the original value.
revertOriginalAmount(): {} //Revert the value to original value
}
当 tab 键被触发时,在 saveValue 之前立即调用 revertOriginalAmount()。因此,保存了原始值而不是当前值。我尝试在 revertOriginalAmount 中设置超时以延迟保存(500 毫秒),但它不起作用。此外,这只是解决潜在问题的廉价黑客,即检测哪些击键触发了模糊功能。
那么我应该在@blur的参数中传递什么来获取事件对象呢?
解决方案
请参阅https://vuejs.org/v2/guide/events.html#Methods-in-Inline-Handlers$event
。
@blur="revertOriginalAmount(abcdef, $event)"
$event
包含事件对象。
methods: {
revertOriginalAmount(dataObject, event): {} //Revert the value to original value
}
推荐阅读
- c++ - 在 DNSAPI 中找不到 DNS 函数
- python - 无法从 SQLAlchemy 中的 psql-> sqlite3 create_all()
- r - 使用 dopar 时数据库连接间歇性失败
- latex - 让 knitr/kable 显示 Latex 代码以供进一步编辑
- php - 使用 eloquent 逐一检索大量行
- javascript - javascript 使用正则表达式修复 json
- android - Hermes 不能在带有 React-native 0.60.2 的 Android 中工作
- postgresql - 如何为 PostgreSQL 11 服务器设置后台工作人员?
- c++ - 如何声明对
::第一的 - ruby-on-rails-5 - RGeo::Geos.supported? 在 irb 中为 true,但在 macOS mojave 中的 bundler 为 false