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 ...
随机推荐
- On-board diagnostics -- Standards documents
http://en.wikipedia.org/wiki/On-board_diagnostics#Standards_documents SAE standards documents on OBD ...
- Educational Codeforces Round 7 B. The Time 水题
B. The Time 题目连接: http://www.codeforces.com/contest/622/problem/B Description You are given the curr ...
- Fitness training
2014-01-14 第一次跑步,结束后大腿酸. 2014-01-15 第二次跑步,跑的过程中臀部酸痛,结束后大腿酸痛. 已经进行跑步8次了,后6次,每次3000米 2014-02-06 plank ...
- 关于MonoDevelop自动缩进的设置
monoDevelop 下载地址:http://monodevelop.com/Download 下载安装之后,可在unity Edit->Preference->External Too ...
- [051] 微信公众平台开发教程第22篇-怎样保证access_token长期有效
为了使第三方开发人员能够为用户提供很多其它更有价值的个性化服务,微信公众平台开放了很多接口,包含自己定义菜单接口.客服接口.获取用户信息接口.用户分组接口.群发接口等,开发人员在调用这些接口时.都须要 ...
- EasyUI基础入门之Pagination(分页)
前言 对于一些企业级的应用来说(非站点),页面上最为基本的内容也就是表格和form了.对于类似于ERP这类系统来说数据记录比較大,前端表格展示的时候必需得实现分页功能了.恰巧EasyUI就提供了分页组 ...
- Cocos2D-X2.2.3学习笔记9(处理重力感应事件,移植到Android加入两次返回退出游戏效果)
这节我们来学习Cocos2d-x的最后一节.怎样处理重力感应事件.移植到Android后加入再按一次返回键退出游戏等.我这里用的Android.IOS不会也没设备呃 效果图不好弄,由于是要移植到真机上 ...
- php-cli模式学习(PHP命令行模式)(转)
之前知道php—cli模式是一种类似shell命令式的执行php程序,不过一直以为这个是一种落后的方式,应该没有什么意义,因为从没有遇到过使用这个cli模式编程的.不过今天遇到了使用cli模式的应用. ...
- 关于Android 访问权限设置
我前几天在做同城交友网(www.niyuewo.com)与医药网(www.yiyaojing.com)时遇到的问题整理如下: Android开发应用程序时,如果应用程序需要访问网络权限,需要在 And ...
- QThread与QWidget使用
本文主要内容: 在任务一中,用 四 种方式实现:点击界面按钮,开线程运行一段程序,结果显示在一个Label上.1. 用不正确的方式得到看似正确的结果2. 用Qt Manual 和 例子中使用的方法3. ...