解决input事件监听拼音输入法导致高频事件

1.业务场景

在文本框中输入内容，执行查询接口，但遇到一个问题，当用拼音打字写汉字去搜索的时候，会输入一些字母拼成汉字，怎么能监听等拼音文字输入完成后再触发文本框监听事件

2.解决方案

在js中有两个事件：

compositionstart：(监听拼音开始输入)

compositionend：（监听拼音输入完成）

3.代码实现
<div><input type="text" class="input">
</div>
    <script>var inp=document.querySelector('input');let isComposite=false;//控制search()触发function search(){//接口开始查询console.log('搜索');}inp.addEventListener('input',function(){if(!isComposite){search();}})inp.addEventListener('compositionstart',function (){console.log('start');isComposite=true;})inp.addEventListener('compositionend',function(){console.log('end');isComposite=false;//由于等待拼音字母输入结束后文本框输入事件则不监听了//所以在结束拼写监听中放search()search();})</script>

解决input事件监听拼音输入法导致高频事件相关推荐

vue判断是否双击_vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作...
Vue 事件处理方法可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. v-on:click 单击事件 + + - - v-on:dblclick 双击事件 ...
13、Java Swing事件监听：事件处理模型和事件监听器
事件表示程序和用户之间的交互,例如在文本框中输入,在列表框或组合框中选择,选中复选框和单选框,单击按钮等.事件处理表示程序对事件的响应,对用户的交互或者说对事件的处理是事件处理程序完成的. 当事件发生 ...
高德地图marker事件监听-高德地图marker绑定事件就执行了[解决立即执行]
官方的demo是这样的: 地址:[http://lbs.amap.com/api/javascript-api/example/infowindow/add-infowindows-to-multip ...
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
这里分别采用后bind(eventType,[data],Listener)//data为可选参数,one()该方法绑定的事件触发一次后自动删除,unbind(eventType,Listener), ...
java 事件监听应用_Spring Boot应用事件监听示例详解
前言本文主要给大家介绍了关于Spring Boot应用事件监听的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 1. Spring Boot特有的应用事件除了Spring ...
移除元素所有事件监听_前端日记—DOM 事件机制和事件委托
DOM事件机制事件指的就是就是onclick,onmouseover,onmouseout等. 2002年W3C规定了浏览器的事件调用顺序标准,这其中有两个关键术语. 事件捕获:简单一点解释事件捕获 ...
js: 添加事件监听addEventListener、移除事件监听removeEventListener
文档 https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener https://developer.m ...
监听拼音输入法确定输入 ,compositionstart 、 compositionend 、 input都存在时的解决办法
$(function () {var cpLock = true;$('#textbox').off().on({compositionstart: function () {//中文输入开始cpLo ...
html键盘事件监听,react怎样监听键盘事件
react监听键盘事件的方法:React中有监听键盘按下事件onKeyUp或者onKeyDown属性(以下用onKeyUp),值为自定义方法keyUp,即onKeyUp={this.keyUp}. 通 ...

解决input事件监听拼音输入法导致高频事件

1.业务场景

2.解决方案

3.代码实现

解决input事件监听拼音输入法导致高频事件相关推荐

最新文章

热门文章