vue中解决模糊搜索输入中文时--未输入完成时触发input事件

最新推荐文章于 2024-05-14 16:32:24 发布
最新推荐文章于 2024-05-14 16:32:24 发布
阅读量5.9k 收藏 1
点赞数 2
文章标签： 模糊搜索
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h841440416/article/details/90782091
版权

在给输入框绑定input或keydown事件时 预期效果是有输入法时，输入中文后触发事件，不希望输一个字母就触发一次事件

可以用到compositionstart，compositionend。 主流浏览器都兼容

我们可以看下官方定义：

根据规范，Composition 事件触发顺序如下：

  • 输入开始时触发 compositionstart
  • 选择字/词完成输入时触发 compositionend
  • 输入过程中每次击键时触发 compositionupdate，包括 start 事件以后立即触发，end 事件以前立即触发
  • Composition 事件以后触发 input 事件

通过 Composition 事件，在 compositionend 里校验非直接输入，就能有效地避免不恰当的校验时机产生的用户体验问题。

我们可以设置开关flag,给表单绑定compositionstart和compositionend事件

开始输入时触发compositionstart时关闭，禁止触发

输入完成后触发compositionend时开启，触发input事件

杰克-船长
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE：原生input进行中文输入时触发的事件
干饭搬砖两不误。
10-12 1163
原生input框在输入中文时触发的两个不常见事件：compositionstart、compositionend
vue2autocomplete一个Vue2的文本输入自动完成组件
08-10
它利用Vue的计算属性和watcher来监听用户输入的变化，当用户在输入框中键入文字时，组件会触发一个搜索请求，这个请求可以是异步的，比如从服务器获取匹配的数据，也可以是同步的，如从本地数据源中筛选。...
如何避免输入中文拼音时触发input事件
Bunny的博客
10-16 267
事件监听器，当输入框的值发生更改时触发。在监听器函数中，它首先检查输入框是否处于合成输入状态。如果不是，则在控制台中记录。的函数，它将在输入框的值发生更改时被调用，并在控制台中记录搜索文本。定义了一个输入框并添加了三个事件监听器。，以指示输入框处于合成输入状态。当输入法完成输入时，会触发。的布尔变量，用于跟踪输入框是否处于合成输入状态。当输入法开始输入时，会触发。函数以处理最终的搜索文本。元素，并定义了一个名为。
屏蔽进行输入法时的监听事件
snake3344的博客
08-30 164
在vue的v-model的输入框中，正常输入字母和汉字可以监听到，但是输入法中的不会监听到,但是如果直接使用原生的input事件去监听，我们可以发现拼字的时候也会被监听到，我们该怎么去实现他这个功能
vue中input输入框常用事件的使用
最新发布
2401_84094725的博客
05-14 469
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
input框输入中文时，输入未完成触发事件。Vue中文输入法不触发input事件？
study_way的博客
10-23 2235
前言 在做搜索输入框时，产品期待实时搜索，就是边输入边搜索，然而对于中文输入法出现的效果，不同的产品可能有不同的意见，有的觉得输入未完成也应该触发搜索。但有的却认为应该在中文输入完成后再触发搜索。我发现在vue中通过v-model绑定的输入框的值，确时正常的，在中文输入未完成的时候不会修改value的值。针对这两种情况，分别做了屏蔽输入过程的change事件和vue中触发change事件。毕竟不同的需求有不同的效果，为了满足各种情况，还是都掌握的好。 如何屏蔽中文输入过程的change事件 在输入拼音过程也
vue自定义指令监听input输入,当输入完成才能调取接口，防止频繁调用接口
Meta.Qing的博客
02-20 3994
Vue 自定义指令来实现监听 input 输入，但是你需要配合一些 JavaScript 代码才能实现输入完成后才调用接口的逻辑。在上面的示例中，我们定义了一个自定义指令叫做。该指令监听了input事件，并使用setTimeout实现了防抖的逻辑，从而在用户输入完成之后才会调用getData方法。同时，我们还在指令的参数中使用了500ms，表示用户输入完成后需要等待 500 毫秒才会调用getData方法，从而避免了频繁调用接口的问题。需要注意的是，上面的代码中使用了一个。
解决input中输入中文过程中会触发input事件的问题
知秋
10-19 3657
当文本段落的组成完成或取消时，compositionend 事件将被触发 (具有特殊字符的触发，需要一系列键和其他输入，如语音识别或移动中的字词建议)。（即输入法编辑器）开始新的输入合成时会触发 compositionstart。通过查阅资料得知在输入中文（包括语音识别时）会先后触发。时，文本框会填入 “虚拟文本”（待确认文本），同时触发。选词完成后触发input事件，只触发一次。时，就是填入实际内容后（已确认文本）。
vue输入框使用模糊搜索功能的实现代码
10-15
主要介绍了vue输入框使用模糊搜索功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
vue实现Input输入框模糊查询方法
10-16
在Vue.js中，实现Input输入框的模糊查询功能是一项常见的需求，特别是在开发数据过滤和搜索功能时。Vue的响应式特性使得我们可以轻松地监听输入框的变化，并实时更新数据列表。以下是一个详细的步骤来解释如何在Vue...
vue实现输入框的模糊查询的示例代码（节流函数的应用场景）
12-09
在Vue.js中实现输入框的模糊查询功能，通常会结合使用`oninput`事件和节流函数，以提高用户体验和性能。节流函数的主要目的是在高频事件触发时限制执行频率，避免频繁调用导致资源浪费或性能下降。例如，`onresize`...
实例详解ztree在vue项目中使用并且带有搜索功能
10-18
在Vue项目中集成zTree并实现搜索功能，可以极大地提升用户界面的交互性和用户体验。zTree是一个基于jQuery的树插件，它具有优秀的性能、灵活的配置和多种功能的组合。下面将详细介绍如何在Vue环境中使用zTree，并...
Vue项目中使用jquery的简单方法
11-29
本文将探讨如何在Vue项目中引入jQuery，并解决一个具体的问题：创建一个带有模糊搜索、输入建议功能的输入框，同时需要处理输入框的焦点、变更事件以及验证输入值是否存在于下拉框中的问题。 首先，要在Vue项目中...
基于input动态模糊查询的实现方法
08-28
例如，在搜索框中输入关键词，系统将实时显示相关的搜索结果。这种技术广泛应用于搜索引擎、电商平台、社交媒体等领域。 下面是基于input动态模糊查询的实现方法： 1. 使用jQuery的change()方法 change()方法用于...
vue 简单自动补全的输入框的示例
11-30
`v-model`指令用于双向绑定输入框的值，`@keyup.enter`监听回车键事件触发搜索方法，`@blur`则监听输入框失去焦点（鼠标离开输入框）时执行的模糊（`blur`）方法。 `v-show`指令用于动态控制匹配建议列表的显示与...
Vue某人At某人仿新浪微博某人user艾特艾特某人
08-12
在`AtUser`组件中，我们需要监听用户输入，当用户输入@字符时触发相应的处理函数。 2. **动态属性**：使用`v-bind`指令绑定动态属性，例如`input`元素的`value`属性，以便实时更新用户输入的内容。 3. **计算属性...
vue input中输入中文时提起触发@input事件的原因与解决方法
从入门到放弃的博客
12-17 3327
https://blog.csdn.net/h841440416/article/details/90782091
好烦，怎么输入拼音的过程也会触发input事件！！！
Twinkle_sone的博客
02-05 2442
🎈input输入框大家应该都很熟悉了吧，不知道大家有没有遇到过这样的一种情况：如上图，在中文输入过程中，输入的拼音也会触发input框的input事件，有些时候我们并不希望在中文输入的过程中拼音触发input事件。 在日常开发中，输入框是一个常见的组件，但是在拼音输入过程中，每次输入都会触发input事件，这可能会导致不必要的操作。本文将介绍一种解决该问题的Vue指令，使得在拼音输入过程中不会触发input事件，从而优化输入框体验。
IOS 下输入中文没有触发 keyup，导致绑定不了数据
爱coding的小蕾蕾
08-30 1976
导致问题出现的原因是 IOS 自带输入法输入中文时不触发 KEYUP 事件，因为不触发 KEYUP 事件，导致文本框最后一个字符没有执行双向绑定解决方法：1.在提交前手工去执行KEYUP事件。2.使用 js 判断值是否一致，不一致把 js 文本框值赋值给 vue 绑定值。html 里面进行双向绑定，结果会发现调起 IOS 中文键盘的时候，输入的值和 v-model=”insName” 绑定的值 “
vue实现 input 下拉框模糊搜索及 IOS 的 keyup 兼容性问题解决
05-27
好的，针对你的问题，我可以给你一些解决方案。 1. Vue实现input下拉框模糊搜索 你可以使用Vue的computed属性来实现下拉框的模糊搜索，代码如下： ```html <template> <div> <input type="text" v-model="search" @input="searchData" /> <ul> <li v-for="item in filteredData" :key="item.id">{{ item.name }}</li> </ul> </div> </template> <script> export default { data() { return { data: [ { id: 1, name: 'Apple' }, { id: 2, name: 'Banana' }, { id: 3, name: 'Orange' }, { id: 4, name: 'Pineapple' }, { id: 5, name: 'Pear' }, ], search: '', }; }, computed: { filteredData() { const search = this.search.toLowerCase(); return this.data.filter((item) => item.name.toLowerCase().includes(search)); }, }, methods: { searchData() { // 搜索操作 }, }, }; </script> ``` 在这个例子中，我们使用data来存储所有的数据，然后使用search来存储搜索关键字。在computed中，我们使用filteredData来过滤数据，只展示与搜索关键字匹配的数据。 2. IOS的keyup兼容性问题解决 在IOS中，keyup事件可能不会触发，而是会触发input事件。为了解决这个问题，我们可以使用v-model来绑定输入框的值，然后使用watch来监听输入框的变化，代码如下： ```html <template> <div> <input type="text" v-model="search" /> </div> </template> <script> export default { data() { return { search: '', }; }, watch: { search(val) { // 输入操作 }, }, }; </script> ``` 在这个例子中，我们使用v-model来绑定输入框的值，然后使用watch来监听search的变化。这样无论是在IOS还是其他设备上，都可以监听输入框的变化了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值