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 ...
随机推荐
- UVA 573 (13.08.06)
The Snail A snail is at the bottom of a 6-foot well and wants to climb to the top.The snail can cl ...
- Dojo系列教程
Dojo学习笔记一: 认识Dojo http://blog.csdn.net/lfsfxy9/article/details/8623897 <dojo 边学边用> http://www. ...
- 翻译学python---《Learn Python the hard Way》---第一章 绪论
打算学习python,但是又不想单纯地看书或是写个小项目,干脆引入很流行的翻译学习法来学习吧- 在论坛上看到了国外的一本<Learn Python the hard Way> ...
- linux脚本^M: bad interpreter:解决方法
转自:http://blog.csdn.net/huiguixian/article/details/6386774 在Linux中执行.sh脚本,异常提示/bin/sh^M: bad interpr ...
- typedef函数指针使用方法
1.简单的函数指针的应用 形式1:返回类型(*函数名)(參数表) char (*pFun)(int); char glFun(int a){ return;} void main() { pFun = ...
- jQuery.validate的this.optional(element)作用
今天使用同事扩展jquery validate函数mobile验证时,require值传入false发现也会验证, 去掉mobile后就没这个问题,把mobile替换成自带的digits也没有这个问题 ...
- Device Pixel Ratio & Media Queries
一些重要的名词解释: CSS pixels(CSS 像素):详见http://www.w3.org/TR/css3-values/#reference-pixe CSS声明的像素值,可随着放大缩小而放 ...
- h5 -1
<header></header> 页眉 主要用于页面的头部的信息介绍,也可用于板块头部 <hgroup></hgroup> 页面上的一个标题组合 一个 ...
- 第十二天--Property List和NSUserDefaults
转自:http://appleparty.diandian.com/post/2012-05-24/9098104219 Property List (属性表) 定义:Property List文件 ...
- spring框架七大模块
1. Spring Core: Core封装包是框架的最基础部分,提供IOC和依赖注入特性.这里的基础概念是BeanFactory,它提供对Factory模式的经典实现来消除对程序性单例模式的需要,并 ...