我们在网页中经常会遇到实时搜索的情况,或者其他类似需要input实时响应的问题,一般情况下,我们是利用input和propertychange事件来监听input内容的变化来响应,但是有一个问题就是当输入汉字的时候,可能我们要输入 ‘实时’ 的时候,我们的input框中会出现 'shishi'直到我们的空格才会变成 '实时',这也就意味着我们依次响应了 's','sh','shi','shis','shish','shishi','实时',前面的结果明显不是我们需要的 ,造成了我们很多次无用的提交,如果是接口请求,那更要命,多发了好多次请求。
最早之前有一个稍微能改善的解决方案就是配合一个定时器延时执行,这样能减少请求次数,但是这个减少是不分情况的减少 ,还是治标不治本。
今天偶然看到几个事件,发现可以完美解决这种问题。我们来看一下这几个事件
compositionstart , compositionupdate ,compositionend
compositionstart 官方解释 : 触发于一段文字的输入之前(类似于 keydown 事件,但是该事件仅在若干可见字符的输入之前,而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词),通俗点,假如我们要输入一段中文,当我们按下第一个字母的时候触发 。
相应的compositionupdate在我们中文开始输入到结束完成的每一次keyup触发。
而compositionend则在我们完成当前中文的输入触发 。
正题来了,通过上面的事件我们就可以完美的解决中文输入的响应问题了,从compositionstart触发开始,意味着中文输入的开始且还没完成,所以此时我们不需要做出响应,在compositionend触发时,表示中文输入完成,这时我们可以做相应事件的处理。
所以我们可以设置一个变量,或者给input定义一个属性,在compositionstart到compositionend之间对input事件不做出响应。看以下代码
$('input').on({
input : function(e){
var flag = e.target.isNeedPrevent;
if(flag) return;
response()
},
compositionstart : function(e){
e.target.isNeedPrevent = true ;
},
compositionend : function(e){
e.target.isNeedPrevent = false;
}
})
function response(){
$('div').append('<p>事 件触发</p>')
}
我们通过compositionstart,compositionend事件来设置flag,判断是否正在进行输入中文以控制input事件的响应,看上去没有问题,但实际执行时会发现在谷歌浏览器中input执行顺序要先于compositionend,火狐执行顺序正常,但compositionend会响应两次。这就导致谷歌浏览器中输入汉字不会响应input事件。当然也可以在compositionend事件中再执行一次response事件,这样的问题是在火狐浏览器中会多执行一次response,显然不是最优方案。
经过试验,发现keyup和compositionend事件执行顺序在各大浏览器都保持一致,于是我们改成如下代码:
$('input').on({
keyup : function(e){
var flag = e.target.isNeedPrevent;
if(flag) return;
response()
},
compositionstart : function(e){
e.target.isNeedPrevent = true ;
},
compositionend : function(e){
e.target.isNeedPrevent = false;
}
})
function response(){
$('div').append('<p>事 件触发</p>')
}
这样在各个浏览器基本保持一致了(兼容compositionstart的浏览器)。但是keyup有一个问题,比如通过鼠标复制粘贴的时候并不相应keyup事件,所以上面的事情我们还需要再优化下,keyup相应按键事件,input响应除了keyup之外的变化事件。代码如下
$('input').on({
keyup : function(e){
var flag = e.target.isNeedPrevent;
if(flag) return;
response() ;
e.target.keyEvent = false ;
},
keydown : function(e){
e.target.keyEvent = true ;
},
input : function(e){
if(!e.target.keyEvent){
response()
}
},
compositionstart : function(e){
e.target.isNeedPrevent = true ;
},
compositionend : function(e){
e.target.isNeedPrevent = false;
}
})
function response(){
$('div').append('<p>事 件触发</p>')
}
最终效果实现:
在线预览:
相关推荐
外部触发功能允许我们根据外部事件来启动ADC转换,而不是内部定时器或软件指令。这在需要精确同步或者避免错过任何重要信号变化的场合非常有用。在这个例子中,我们使用PB11引脚作为外部触发源,该引脚可以配置为...
在 IE8 浏览器中,对于 input type=file 的文件上传控件,执行 click 方法只能触发 onclick 事件绑定的代码执行,而不能弹出文件选择对话框。这是因为 IE8 浏览器对文件上传控件的限制。 initEvent 方法用于初始化...
6. **性能优化**:在大型应用中,使用事件代理(`.on()`方法)可以提高性能,因为只需绑定一次事件,而不是为每个input元素单独绑定。 7. **响应式设计**:考虑到跨设备兼容性和不同屏幕尺寸,提示框的位置可能需要...
在实际项目中,我们可能需要多次使用这样的联动效果,所以可以将代码封装成一个可重用的函数: ```javascript function setupCheckboxLinkage() { $('input[type="checkbox"]').on('change', function() { var ...
`oninput`事件在用户输入内容时触发,允许开发者实时监控并处理表单元素中的变化。`jquery-inputevent`插件便是为了解决这一问题,提供了在所有主流浏览器中统一且可靠的`oninput`事件处理。 ### 插件介绍 `jquery...
例如,每输入一个字符都会触发事件,那假如我们需要输入很长的信息呢,那查询是不是就得触发多次?ajax 连续多次触发,再加上假如我们的方法体中有操作 DOM 元素的方法,那么必定会给我们的浏览器进入假死甚至崩溃...
7. **提升性能**:当处理大量元素时,一次性绑定事件可能会消耗较多资源。可以通过分批处理或延迟加载来优化。同时,如果所有按钮的点击事件处理逻辑相同,可以只绑定一个事件处理函数,通过事件对象的`target`属性...
其原理是用时间戳来判断是否已到回调该执行时间,记录上次执行的时间戳,然后每次触发 scroll 事件执行回调,回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段,如果是,则执行,并更新上次...
这时,通过JavaScript动态添加新的input元素,可以提高用户的填写效率,避免他们多次刷新页面。 标签“Javascript”提示我们,这个话题完全聚焦于JavaScript语言本身及其在Web开发中的应用。JavaScript提供了丰富的...
在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互。本主题聚焦于利用jQuery来改进文件上传功能,尤其是针对`<input type="file">`元素的样式和交互。在传统的HTML文件...
`onchange` 事件是 JavaScript 中的一个重要事件,它会在元素的值发生改变并失去焦点后触发。在 EasyUI 中,`onchange` 事件同样适用于 `easyui-textbox` 和 `easyui-combobox`,可以用来监听用户在这些组件上的操作...
例如,通过监听`change`事件,每次用户选择文件后,将其上传,并清空当前的文件选择,然后再次触发文件选择对话框,从而达到选择多个文件的效果。 在Java JSP环境中,处理多文件上传通常会涉及Servlet和...
例如,持续按住"A"键时,游戏不会每帧都收到新的"A"键按下事件,而是每隔一定时间间隔(如16ms)才触发一次。 ### 7. 多平台支持 游戏引擎需要考虑跨平台兼容性,因此输入系统需要能处理不同操作系统和设备的输入。...
例如在搜索框中,并不是你输入一个字就需要渲染一次数据,而是取最后一次的输入内容进行搜索。 连续按下 AAAAA ,只取最后一次按下时搜索框的内容(即:AAAAA)进行搜索。 而不是搜索跟 A(第一次按下),AA(第二次...
因此,我们需要引入延时优化,避免短时间内多次触发处理函数。通常做法是使用`setTimeout`来设置一个延迟执行的任务。然而,这种方式的问题在于,即使用户持续输入,定时器依然会在设定的时间后执行,无法准确地只...
- 事件同步:在多个设备之间进行精确的时间同步,确保事件的发生在同一时间窗口内。 6. 注意事项: - 捕获事件可能会引起中断,因此需要正确处理中断服务程序,避免影响其他系统功能。 - 输入信号应与定时器输入...
例如,jQuery的事件绑定可以一次为多个元素设置,而原生DOM方法则需要逐个元素绑定。此外,jQuery的事件对象包含了更多关于事件的信息,如事件类型、目标元素等,方便开发者使用。 四、事件委托 jQuery的事件委托...
在Android Shell中模拟事件是调试和测试应用程序的一种常见方法,特别是对于那些需要手动触发特定用户输入行为的场景。本文将详细介绍如何使用Android Shell来模拟各种输入事件,包括长按、单击和滑动。 1. **基本...
这种方法可以有效地防止因为用户连续快速输入导致的多次请求。需要注意的是,`debounce`函数返回的新函数在调用时不会立即执行,而是会在延迟时间结束后执行,所以当用户在延迟时间内继续输入,之前调用的函数会被...
Unity引擎是全球开发者广泛使用的游戏开发平台,其内置的输入系统经过多次迭代,现在已经进化为一套高效、通用的InputSystem。这个全新的输入系统旨在提供对各种设备(包括键盘、鼠标、触摸屏、游戏手柄以及虚拟现实...