JavaScript 监听输入法（IME）输入事件的最佳实践

IME输入法事件监听的挑战

输入法触发键盘事件的机制因操作系统和浏览器而异：是每次击键都触发，还是选词完成后触发，甚至整句输入如何处理，各平台看法不同。最极端的情况是，启用输入法后浏览器仅触发一次 keydown 事件，随后再无其他键盘事件。这对 Suggestion 控件构成挑战，因为该控件需监听文本框变化，而事件监听比轮询更准确且节省资源，若改用轮询则可能影响性能。

基于keydown与轮询的基础方案

监听启用输入法后的击键应使用 keydown 事件，因其信息最丰富，其他键盘事件在输入法启用后可能不触发。多数操作系统和浏览器遵循事实标准：输入法输入时 keydown 事件的 keyCode 为 229。但触发频率不确定，有时每次击键都触发，有时仅选词完毕时触发。若需实时监控文本框内容变化，此时必须使用轮询机制。

 
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与Firefox Mac的兼容处理

Opera 浏览器行为独特，常反其道而行之。例如，它不支持 keyCode 为 229 的事实标准，而是使用 keyCode 197 表示输入法状态。因此，代码需改良：若检测到 Opera 浏览器，应使用不同的 keyCode 常量进行比较。

var imeKey = (UA.Opera == 0) ? 229 : 197;

此外，Firefox for Mac 对事件支持存在差异。由于 Mac 版本在 Mozilla 中优先级较低，常出现 Windows 版无问题的兼容性问题。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 */
}