在JavaScript中监听IME键盘输入事件


Posted in Javascript onMay 29, 2011

输入法应当如何触发键盘事件呢?是每一下击键都触发一次事件,还是选词完毕才触发事件呢?整句输入又该如何触发事件呢?不同的操作系统和不同的浏览器对此有不同的看法。在最糟糕的情况下,用户使用输入法后浏览器就只触发一次 keydown ,之后就没有任何的键盘事件了。这对于 Suggestion 控件的实现来说是个大问题,因为 Suggestion 控件需要监听文本输入框的变化,而事件是最准确也最节省计算资源的做法,如果换成轮询的话性能就可能受到影响。
首先,要监听启用输入法后的击键事件应当使用 keydown 事件,这是信息最丰富的一个事件,因为在启用输入法后别的键盘事件可能不会被触发。其次,大多数操作系统和浏览器都实现了一个事实标准,就是在用户使用输入法输入时, keydown 事件传入的 keyCode 取值为 229 。然而触发 keydown 的频率是不确定的,有些情况下每一下击键都触发事件,有些情况下只有选词完毕才触发事件。这时候,如果我们还是要实时监控文本框的内容变化,就必须使用轮询了。

var timer; 
var imeKey = 229; 
function keydownHandler (e) { 
clearInterval(timer) 
if (e.keyCode == imeKey) { 
timer = setInterval(checkTextValue, 50); 
} else { 
checkTextValue(); 
} 
} 
function checkTextValue() { 
/* handle input text change */ 
}

Opera 是一款有趣的浏览器,别人做的事情它都不做,别人都不做的事情它都喜欢做。例如说,它偏偏不支持 keyCode == 229 这个事实标准,而要使用 keyCode == 197 来表示输入法的使用。因此,你需要在上述代码的基础上做一下改良,如果监测到是 Opera 浏览器,就换一个 keyCode 常量来做比较。
var imeKey = (UA.Opera == 0) ? 229 : 197;
最后,还有一个更不受重视的浏览器叫做 Firefox for Mac 。估计是因为 Mac 版本对于 Mozilla 来说实在是太不重要了,所以很多 Windows 版本都没问题的地方 Mac 版本就会出小问题,例如说对上述事件的支持。 Firefox for Mac 不会出现 keyCode == 229 的情况,而且在输入法启用后只有第一下击键会触发 keydown 事件,因此只能在击键后一直使用轮询。
if (e.keyCode == imeKey || UA.Firefox > 0 && UA.OS == 'Macintosh') {
在添加了这两项改进后,实时监控文本框的变化就没有问题了,即使用户启用了输入法。完整的代码如下:
var timer; 
var imeKey = (UA.Opera == 0) ? 229 : 197; 
function keydownHandler (e) { 
clearInterval(timer) 
if (e.keyCode == imeKey || UA.Firefox > 0 && UA.OS == 'Macintosh') { 
timer = setInterval(checkTextValue, 50); 
} else { 
checkTextValue(); 
} 
} 
function checkTextValue() { 
/* handle input text change */ 
}
Javascript 相关文章推荐
JavaScript运行时库属性一览表
Mar 14 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
自己动手封装一个React Native多级联动
Sep 19 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
微信小程序 导入图标实现过程详解
Oct 11 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 Javascript
JS removeAttribute()方法实现删除元素的某个属性
Jan 11 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
May 28 #Javascript
Jquery css函数用法(判断标签是否拥有某属性)
May 28 #Javascript
最新28个很棒的jQuery 教程
May 28 #Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
May 28 #Javascript
真正的JQuery.ajax传递中文参数的解决方法
May 28 #Javascript
jquery 图片上传按比例预览插件集合
May 28 #Javascript
使用jquery实现select添加实现后台权限添加的效果
May 28 #Javascript
You might like
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
php生成EAN_13标准条形码实例
2013/11/13 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
jquery手风琴特效插件
2015/02/04 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
js中DOM三级列表(代码分享)
2017/03/20 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
2019/12/19 Javascript
Python连接数据库学习之DB-API详解
2017/02/07 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
Python实现数据可视化看如何监控你的爬虫状态【推荐】
2018/08/10 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
python绘制随机网络图形示例
2019/11/21 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
如何利用python正则表达式匹配版本信息
2020/12/09 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
95%的面试官都会问到的50道Java线程题,附答案
2012/08/03 面试题
销售代表求职自荐信
2013/10/01 职场文书
求职简历的自我评价怎样写好
2013/10/07 职场文书
项目建议书格式
2014/03/12 职场文书
教师演讲稿开场白
2014/08/25 职场文书
拖欠货款起诉状
2015/05/20 职场文书
完美处理python与anaconda环境变量的冲突问题
2021/04/07 Python
python实战之90行代码写个猜数字游戏
2021/04/22 Python
这样写python注释让代码更加的优雅
2021/06/02 Python