来源:Realazy 作者:Realazy
在某些情况下,比如自动补全(auto complete)的输入框中,需要使用keyup事件来监听键盘的输入以迅速作出回应。
关键在于keyup, 如果世界是美好的,那么就不会有这篇blog. 可是……
世界是不美好的。我们活在中文世界,我们要用输入法。在输入法开启的情况下,您会碰到不美好的事情:keyup失效。对于您绑定到keyup的任何回调函数,除非您把输入法切换回英文状态,否则它会无动于衷。如果能称之为bug,我会很高兴,因为bug会有修复的可能,如果是特征(feature),那么,我只好叹息一下。
问题
在开启输入法的情况下,三个浏览器的具体问题如下:
* IE:触发keydown和keyup, 不触发keypress. 能够获得输入值。
* Firefox:触发keydown和keypress, 不触发keyup. 输入值未能获得。在回车后会触发keyup, 可获得输入值。
* Opera:keydown, keypress和keyup都不触发,输入值也未能获。
(如果您能帮我试用一下Safari,我会很高兴并谢谢您。这里有一个 测试页面 )
解决方案
总结出以上问题,没有兴奋反而陷入绝望,因为没有google出解决方案(是的,对于拉丁语系的老外来说,不会存在输入法)。但是,wait, 谷歌搜索的自动补全不是工作得好好的吗?于是研究一下这个 http://www.google.cn/ac.js。嘿嘿,虽然混淆得还可以,但还是可以发现蛛丝马脚的。它使用一个计时器,当输入框处于聚焦(focus)状态时,每10秒执行一次回调函数。
虽然挺耗资源(所以建议在输入框失焦(blur)时,一定要清除这个计时器),但也只能如此了。作前端开发的,不仅要与语言(JavaScript, CSS, HTML) 斗,还要与浏览器斗,其乐无穷也。
分享到:
相关推荐
keydown事件发生在按键被按下的时候,接着触发keypress,松开按键的时候触发keyup事件 中文输入法: firfox:输入触发keydown,回车确认输入触发keyup chrome:输入触发keydown、keyup,回车确认输入只触发keydown ...
当监听一个input的keyup的事件的时候,英文输入法的情况下可以实时的通过keyup事件检测到文本框value的变化,但是当输入法变成中文后,input的keyup事件就不会被正常触发。这是最先前的写法。 <html> <...
C#WinForm中的KeyDownKeyPress和KeyUp事件相关知识点
主要介绍了C# KeyUp事件中MessageBox的回车(Enter)键回调问题解决方案,需要的朋友可以参考下
代码如下:$(document).ready(function(){ $(‘#news_title’).bind(‘input’,fun).bind(‘keyup’,fun);}); //function listvar fun=function(){ ...bind(‘input’,fun) 用于ff下keyup bind(‘keyup’,fun) 用于ie
遇到vue element-ui 绑定@keyup事件无效的问题怎么解决?下面小编就为大家分享一篇vue element-ui 绑定@keyup事件无效的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
KeyUp:在控件有焦点的情况下释放键时发生。 1、KeyPress主要用来接收字母、数字等ANSI字符 KeyDown 和 KeyUP 事件过程通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键 2、KeyPress 只能捕获单个...
主要是对JQuery中keyUp与keyDown的区别进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
当KEY_RIGHT按键按下的时候挂起任务led_task,这是LED0和LED1停止闪烁。当KEY_LEFT按键按下的时候,如果led_task被挂起则恢复之, 如果没有挂起则没有影响。当KEY_UP按键按下的时候删除任务beep_task。当KEY_DOWN...
AngularJS ng-keyup 指令 AngularJS 实例 按键松开时执行的代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> [removed][removed] </head> <body ng-app=""> <...
资源来自pypi官网。 资源全名:keyup-1.1.2.tar.gz
这样按下键盘中的enter事件就是有效的了 补充知识: vue给div绑定keyup的enter事件实现接电话(结合阿里云软电话SDK) 摘要:之前我们的接入的阿里云软电话SDK的功能,现在有个新的需求就是我们自己的弹窗中添加一...
重要的键盘事件: 事件顺序:keydown -> keypress ->keyup 对于输入法开启时: keypress: 这三个事件中最最特别的事件的说,如果巧妙运用可以事半功倍: 1. 首先对于大部分功能键是没有keypress事件的 Caps lock ,...
react-hotkeys React组件可侦听keydown和keyup键盘事件,定义和调度键盘快捷键。 使用hotkeys.js的fork进行特殊字符的keydown检测。 您为它提供了shortcu react-hotkeys React组件的键盘映射,以侦听keydown和keyup...
非常全面的按键精灵命令 例: KeyPress {键盘虚拟码} {次数} 解释:先“按下”再“弹起”键,模拟我们平时的“按键”操作. 我们在使用键盘的时候有两种操作...在某些情况下普通模拟按键命令会失效,不妨试试硬件模拟命令