jQuery - 中文輸入法與KeyDown/KeyPress事件

标签： 中文編碼 Javascript jQuery | 发表时间：2011-04-26 18:32 | 作者：Jeffrey 晓刚
出处：http://blog.darkthread.net/blogs/darkthreadtw/default.aspx

最近專案中引用了Telerik ASP.NET擴充元件AutoComplete輸入欄位，測試時發現偶爾會不聽始喚，輸入文字時無法觸發資料查詢，在Javascript Source Code裡反覆追蹤測試，燃燒了可觀的寶貴春青，終於理出頭緒: 問題在中文輸入法!

過去模糊地知道中文輸入在瀏覽器的鍵盤事件行為上有些特殊，但從未深究，這回算是比較清楚研究其中的差別。其實最明顯的差異是: 切到中文輸入法後，輸入文字將不會觸發KeyPress事件，只會有KeyDown，而且傳回的e.keyCode會一律是229。

寫了一段程式來做實驗:

<html>
<head>
<script type='text/javascript' 
        src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js'></script>
<script type='text/javascript'>
$(function() {
  var $log = $("#dvLog");
  $("#txtTest")
  .bind("keypress", function (e) {
      $log.append("<span>KeyPress: " + e.which + "</span> ");
  }).bind("keydown", function (e) {
      $log.append("<span>KeyDown: " + e.which + "</span> ");
  });
  }).bind("input", function (e) {
      $log.append("<span>Input!</span> ");
  });
  $("#btnClear").click(function() { $log.empty(); });
});
</script>
</head><body>
<input type="text" id="txtTest" />
<input type="button" id="btnClear" value="clear" />
<div id="dvLog" style="border: 1px solid red; font-size: 9pt; height: 50px;"></div>
</body>
</html>

我使用倉頡輸入法(New ChangJie 2010)，以IE9測試，操作過程及結果如下:

    1. 切換到新倉頡輸入法，點txtTest取得焦點準備輸入文字
    2. 按【一】(M鍵)，出現KeyDown: 229
    3. 按Enter鍵確定選字，此時出現Input!
    4. 按數字1，出現KeyDown: 229跟Input!
    5. 使用滑鼠將輸入法切回英文(不用按鍵切換避免觸發多餘事件)
    6. 按數字2，出現KeyDown: 50、KeyPress: 50以及Input!

FireFox4測試的結果與IE9相同。若將IE9切成IE7相容模式，結果不太相同，看來並不支援Input事件

    1. 切換到新倉頡輸入法，點txtTest取得焦點準備輸入文字
    2. 按【一】(M鍵)，出現KeyDown: 229
    3. 按空白鍵選字，再出現KeyDown: 229
    4. 按數字1，出現KeyDown: 229
    5. 使用滑鼠將輸入法切回英文(不用按鍵切換避免觸發多餘事件)
    6. 按數字2，出現KeyDown: 50、KeyPress: 50

Chrome10的測試結果為:

    1. 切換到新倉頡輸入法，點txtTest取得焦點準備輸入文字
    2. 按【一】(M鍵)，出現KeyDown: 229跟Input!
    3. 按空白鍵選字，出現KeyDown: 229跟Input!
    4. 按數字1，出現KeyDown: 229跟Input!
    5. 使用滑鼠將輸入法切回英文(不用按鍵切換避免觸發多餘事件)
    6. 按數字2，出現KeyDown: 50、KeyPress: 50以及Input!

胡亂做個結論:

輸入欄位啟用中文輸入法時，將不會觸發KeyPress事件，而KeyDown事件中的KeyCode則固定傳回229。IE9, Firefox 4, Chrome支援按鍵Input事件，在IE9/Firefox4上可輔助判別中文輸入的細節，但IE7不支援，Chrome的行為不同。

綜合以上觀察，要自己搞出跨瀏覽器可以精準在使用者輸入每個字(不管有輸入法、不管中英文)時觸發的事件，看來是很艱鉅的任務。所幸網路上善心神人很多，找到一個不錯的解法, Cross browser input event for jQuery, 這個Plugin重新包裝了input事件，所以我們只需寫成:

$("#txtText").bind("input", function() {
    this.value; //可取得目前的文字內容
});

就能在每次輸入中文字或英文字時觸發input事件，雖然無法精確掌握每次的按鍵內容，但已可滿足掌握中文輸入模式下每次文字變動的需求。[2011-04-26補充]要精確抓取每一個按鍵的keyCode，可考慮使用KeyUp事件(但連選字時的上下鍵，送字的Space都包含在內)，感謝drem補充!

為網路開發者社群按一個讚!

相关 [jquery 中文 keydown] 推荐：

jQuery - 中文輸入法與KeyDown/KeyPress事件

- 晓刚 - 黑暗執行緒
最近專案中引用了Telerik ASP.NET擴充元件AutoComplete輸入欄位，測試時發現偶爾會不聽始喚，輸入文字時無法觸發資料查詢，在Javascript Source Code裡反覆追蹤測試，燃燒了可觀的寶貴春青，終於理出頭緒: 問題在中文輸入法!. 過去模糊地知道中文輸入在瀏覽器的鍵盤事件行為上有些特殊，但從未深究，這回算是比較清楚研究其中的差別.

jQuery验证控件jquery.validate.js使用说明+中文API

- - 互联网 - ITeye博客
官网地址： http://bassistance.de/jquery-plugins/jquery-plugin-validation. jQuery plugin: Validation 使用说明  . 转载自： http://blog.sina.com.cn/s/blog_608475eb0100h3h1.html.

jquery的$.ajax() $.post() $.getJSON() 等ajax方法时,中文参数乱码问题

- - CSDN博客推荐文章
在使用jquery的$.ajax()  $.post() $.getJSON() 等ajax方法时，难免会有用到中文参数的问题，在后台接收的中文参数是乱码，解决方法如下：. 　　　 dataType : ‘json’ 　　　 ,type : ‘POST’ 　　　 ,url : ‘http://localhost/test/test.do’ 　　　 ,data : {id: 1, type: ‘商品’} 　　　 ,success : function(data){ 　　　　　　　 　　　 } } );.

JQuery 选择器

- - CSDN博客Web前端推荐文章
}

点击我

.    像上面这样把JavaSript代码和HTML代码混杂在一起的做法同样也非常不妥，因为它并没有将网页内容和行为分离，所以才有JQuery选择器的学习.

点击我

. //给class为demo的元素添加行为.

jquery操作xml

- - CSDN博客Web前端推荐文章
jquery真的很强大，虽然一直在用jquery，不用一直都没有深入，这几天重新学习了一下，不得不感叹她的强大，已经让我深深入迷. 这里记录一下，她是怎么快速地操作xml的.. 这里我们有一个xml文件：. jquery如何操作呢,总的思想，就是和操作dom差不多的方法. 首先我们获取这个文件的内容：（我先引入jquery库哈）.

jQuery JSONP跨域

- - Web前端 - ITeye博客
基于Jquery的Ajax跨域访问. 单点登录服务器(sso服务器). 登录网页项目的时候，由于使用了单点登录，所以页面会跳转到sso服务器，进行统一登录，. 现在需要在该界面增加令牌的认证，但是SSO服务器和令牌服务器部署在不同的服务器，且暂时没有要合并的可能，所以在SSO登录的时候必须要对令牌进行验证，就必须涉及到了跨域访问的问题.

jquery 插件

- - JavaScript - Web前端 - ITeye博客
 jQuery插件的开发包括两种：. 一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法. jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法. 下面就两种函数的开发做详细的说明. 1 、类级别的插件开发.

让jquery更快

- - JavaScript - Web前端 - ITeye博客
很久没有关注jQuery了，最近重新看了一下，看到一些不错的文章，转来坐一下笔记. 其内容和一些新提供的方法还是很多有值得学习的地方. 使用最新版本的jQuery. jQuery的版本更新很快，你应该总是使用最新的版本. 因为新版本会改进性能，还有很多新功能. 下面就来看看，不同版本的jQuery性能差异有多大.

jQuery Tools：Web开发必备的 jQuery UI 库

- - 博客园_首页
jQuery Tools 是基于. jQuery 开发的网站界面库，包含网站最常用的Tabs（选项卡）、Tooltip（信息提示）、Overlay（遮罩、弹窗）、Scrollable（滚动控制）、Form Validator（表单验证）、Rangeinput（范围选择）、Dateinput（日期选择）等众多功能.

jQuery基础之jQuery的DOM操作

- - CSDN博客推荐文章
 为了能全面地讲解DOM操作，首先需要构建一个网页. 因为每一张网页都能用DOM表示出来，而每一份DOM都可以看作一棵DOM树.    

你最喜欢的水果是?

 .      
  • 苹果
    •  .      
  • 橘子
    •  .