在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 类
Nov 07 Javascript
chrome原生方法之数组
Nov 30 Javascript
ajax的hide隐藏问题解决方法
Dec 11 Javascript
jquery获取复选框被选中的值
Mar 22 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
jQuery实现防止提交按钮被双击的方法
Mar 24 Javascript
JS实现淡入淡出图片效果的方法分析
Dec 20 Javascript
jQuery中的deferred使用方法
Mar 27 jQuery
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
vue.js系列中的vue-fontawesome使用
Feb 10 Javascript
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
解读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
PHP编程之高级技巧——利用Mysql函数
2006/10/09 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
Jquery优化效率 提升性能解决方案
2010/09/06 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
SinaEditor使用方法详解
2013/12/28 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
微信小程序实现点击图片放大预览
2019/10/21 Javascript
实用的 vue tags 创建缓存导航的过程实现
2020/12/03 Vue.js
python复制文件代码实现
2013/12/23 Python
Python实现方便使用的级联进度信息实例
2015/05/05 Python
Python3 中文文件读写方法
2018/01/23 Python
深入浅析python with语句简介
2018/04/11 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
python异步Web框架sanic的实现
2020/04/27 Python
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
高三高考决心书
2014/03/11 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
英语教育专业毕业生求职信
2014/08/28 职场文书
化工实习心得体会
2014/09/09 职场文书
党员十八大心得体会
2014/09/12 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
首席执行官观后感
2015/06/03 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
Python保存并浏览用户的历史记录
2022/04/29 Python
MySQL数据库简介与基本操作
2022/05/30 MySQL
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS