jQuery - 中文輸入法與KeyDown/KeyPress事件
最近專案中引用了Telerik ASP.NET擴充元件AutoComplete輸入欄位,測試時發現偶爾會不聽始喚,輸入文字時無法觸發資料查詢,在Javascript Source Code裡反覆追蹤測試,燃燒了可觀的寶貴春青,終於理出頭緒: 問題在中文輸入法!
過去模糊地知道中文輸入在瀏覽器的鍵盤事件行為上有些特殊,但從未深究,這回算是比較清楚研究其中的差別。其實最明顯的差異是: 切到中文輸入法後,輸入文字將不會觸發KeyPress事件,只會有KeyDown,而且傳回的e.keyCode會一律是229。
寫了一段程式來做實驗:
![]() |
jQuery - 中文輸入法與KeyDown/KeyPress事件
最近專案中引用了Telerik ASP.NET擴充元件AutoComplete輸入欄位,測試時發現偶爾會不聽始喚,輸入文字時無法觸發資料查詢,在Javascript Source Code裡反覆追蹤測試,燃燒了可觀的寶貴春青,終於理出頭緒: 問題在中文輸入法!
過去模糊地知道中文輸入在瀏覽器的鍵盤事件行為上有些特殊,但從未深究,這回算是比較清楚研究其中的差別。其實最明顯的差異是: 切到中文輸入法後,輸入文字將不會觸發KeyPress事件,只會有KeyDown,而且傳回的e.keyCode會一律是229。
寫了一段程式來做實驗:
我使用倉頡輸入法(New ChangJie 2010),以IE9測試,操作過程及結果如下:
- 切換到新倉頡輸入法,點txtTest取得焦點準備輸入文字
- 按【一】(M鍵),出現KeyDown: 229
- 按Enter鍵確定選字,此時出現Input!
- 按數字1,出現KeyDown: 229跟Input!
- 使用滑鼠將輸入法切回英文(不用按鍵切換避免觸發多餘事件)
- 按數字2,出現KeyDown: 50、KeyPress: 50以及Input!
FireFox4測試的結果與IE9相同。若將IE9切成IE7相容模式,結果不太相同,看來並不支援Input事件
- 切換到新倉頡輸入法,點txtTest取得焦點準備輸入文字
- 按【一】(M鍵),出現KeyDown: 229
- 按空白鍵選字,再出現KeyDown: 229
- 按數字1,出現KeyDown: 229
- 使用滑鼠將輸入法切回英文(不用按鍵切換避免觸發多餘事件)
- 按數字2,出現KeyDown: 50、KeyPress: 50
Chrome10的測試結果為:
- 切換到新倉頡輸入法,點txtTest取得焦點準備輸入文字
- 按【一】(M鍵),出現KeyDown: 229跟Input!
- 按空白鍵選字,出現KeyDown: 229跟Input!
- 按數字1,出現KeyDown: 229跟Input!
- 使用滑鼠將輸入法切回英文(不用按鍵切換避免觸發多餘事件)
- 按數字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/KeyPress事件的更多相关文章
- Ubuntu 安裝 嘸蝦米 輸入法
O S : 14.04.1-Ubuntu 加入fcitx開發團隊的repository: sudo add-apt-repository ppa:fcitx-team/nightly sudo apt ...
- Windows 小技巧: 變更輸入法順序
Windows XP 中還是有辦法變更輸入法順序的!!只不過,要動用到 Regedit.exe 這個程式. 執行 Regedit.exe至 HKEY_CURRENT_USER\Keyboard Lay ...
- C#(KeyChar和KeyCord值,KeyDown/KeyPress事件区别)
1. 首先将窗口属性KeyPreview设为true,如果属性对话框中找不到,就直接在代码里添加:2. 添加KeyPress / KeyDown事件: KeyPress 和KeyDown .KeyPr ...
- fedora23安装搜狗輸入法?
1, 安裝方法, 是通過下載 repo文件, 添加repo文件, 然後通過dnf啦安裝的. repo文件地址是: fedora 的中文社區: https://www.fdzh.org/ fdzh: 就 ...
- CentOS7.6安装rime輸入法
# solve dependencyyum install -y gcc gcc-c++ boost boost-devel cmake make cmake3yum install glog glo ...
- 透過手機 App 在 OpenELEC(XBMC)中輸入中文
這裡介紹如何使用手機 App 在沒有中文輸入法的 OpenELEC(XBMC)中輸入中文字. OpenELEC(XBMC)雖然有內建中文語系,但是卻沒有中文的輸入法,沒辦法直接輸入中文字,這對於一般家 ...
- 在JS/jQuery中,怎么触发input的keypress/keydown/keyup事件?
怎么触发keypress/keydown/keyup事件? 问题: 1.在之前的写的input后面添加了搜索按钮 2.input只有keyup事件,如下: $("#desktop_folde ...
- keydown,keypress,keyup三者之间的区别
最近看了Javascript高级教程中对过滤输入的介绍,想实现比如电话号码中不能包好非数值的字符,而相应文本中插入字符的操作是keypress事件,所以就想通过阻止这个事件的默认事件行为来阻止这个事件 ...
- keydown - > keypress - > keyup 用法和区别
英文输入法: 事件触发顺序:keydown - > keypress - > keyup 中文输入法: firfox:输入触发keydown,回车确认输入触发keyup chr ...
随机推荐
- 729 - The Hamming Distance Problem
// 题意: // 输入两个整数N, H,按照字典序输出所有长度为N,恰好包含H个1的01串 // 规模:1<=H<=N<=16 // 算法A:2^N枚举,输出1的个数为H的.采 ...
- ArcSDE 10.2建立SDE服务
从ArcGIS 10.1开始,arcgis官方推荐以直连方式连接SDE,因此在SDE安装时不再自动安装SDE服务,以下是手动安装SDE服务的方法 环境 服务端: oracle 11.2 64位,Arc ...
- Android获取联系人示例,从数据库加载,带首字母标签
这几天打算学习下Android联系人方便的一些东西,之前稍有涉略,不过每次都是浅尝辄止. 推荐国内两个Link: http://fanfq.iteye.com/blog/779569 http://w ...
- iis7.5配置.net mvc注意事项
iis7.5配置.net mvc注意事项 1. 应用程序池采用经典模式,framework4.0.可能存在权限问题,解决办法:在高级设置的标识设为LocalSystem.一般mvc都采用集成模式, ...
- 使用 Team Foundation 版本控制命令
使用 Team Foundation 版本控制命令 Visual Studio 2013 其他版本 Visual Studio 2010 Visual Studio 2008 Visual Stu ...
- MYSQL 5.7 主从复制 -----GTID说明与限制 原创
http://www.cnblogs.com/cenalulu/p/4309009.html http://txcdb.org/2016/03/%E7%B3%BB%E7%BB%9F%E8%A1%A8- ...
- 关于egg的压缩测试报告
167274doc 单字分词 全压缩 时间 real 15m58.464suser 13m52.157ssys 2m3.445s 空间 tmpfs 12G 1.5G 11G 13% /ape ...
- linux下网络编程常见问题
网络程序异常退出无core文件产生 这种情况发生在一边连接端已经关闭,但是另外一边还在对连接句柄做send操作,这样做send操作的进程会收到SIGPIPE信号,默认行为是直接退出且不会产生core. ...
- cpio备份命令
cpio是一个比较古老的备份命令,也是用于磁带机备份的工具.虽然如此,现在许多时候仍然需要使用这个命令.例如定制系统内存映像盘时等. 小知识:系统内存映像盘通常位于引导分区/root中,文件名以ini ...
- PCA MATLAB
之前princomp函数还可以正常使用,但是今天突然不能使了!总是显示错误使用 pca输入参数太多. 出错 princomp (line 29) [varargout{1:nargout}]=p ...