修改jQuery.Autocomplete插件 支持中文輸入法 避免TAB、ENTER鍵失效、導(dǎo)致表單提交
更新時間:2009年10月11日 13:55:13 作者:
jQuery.Autocomplete 是jquery的流行插件,能夠很好的實現(xiàn)輸入框的自動完成(autocomplete)、建議提示(input suggest)功能,支持ajax數(shù)據(jù)加載。
但唯一遺憾的是,在對中文輸入法打開時,firefox3.0中是對中文拼音的自動匹配,而對輸入后的中文無法及時觸發(fā)匹配;而在我的IE6.0下,則無此問題。
原因分析:
Autocomplete插件對用戶輸入字符的觸發(fā)自動匹配是通過”keydown”事件進行的(可分析jquery.autocomplete.js第 92行),在IE6中,當輸入法打開時,輸入的字符是不會觸發(fā)”keydown”的,只有中文輸入完畢才觸發(fā)之,所以中文輸入和latin文沒有區(qū)別的;但在firefox3.0下,無論輸入法打開否,按鍵都會觸發(fā)”keydown”事件,所以造成中文輸入完畢,自動匹配的是剛才打出的部分中文拼音字母。 ------所以只有Firefox有問題。
解決方法:
網(wǎng)上查到的最多做法是修改jquery.autocomplete.js第92行,將”keydown”替換為”keyup”,但這個不是根本辦法,雖然這樣改后可在firefox中及時對輸入的中文進行自動匹配,但將原插件中回車、tab等重要的事件機制破壞了,比如這樣改后,如果你的input是在一個form里的話,回車從原來的將選定項輸入到input中變?yōu)榱酥苯犹峤籪orm表單了,這并不是我們想要的。
我的方法原理是,補充一個原插件觸發(fā)查詢的事件,就是當input輸入欄發(fā)生字符變化時,重新進行查詢(調(diào)用其內(nèi)部的onChange函數(shù)),這里主要針對firefox而言,因為我們的系統(tǒng)訪問最多的是IE和firefox。而恰好firefox有一個input變化的事件就是oninput,那么我們只要在原jquery.autocomplete.js第199行,插入如下代碼:
.bind("input", function() {
// @hack:support for inputing chinese characters in firefox
onChange(0, true);
});
插入后,代碼大概如下:
...
...
jQueryinput.unbind();
jQuery(input.form).unbind(".autocomplete");
}).bind("input", function() {
// @hack:support for inputing chinese characters in firefox
onChange(0, true);
});
...
原因分析:
Autocomplete插件對用戶輸入字符的觸發(fā)自動匹配是通過”keydown”事件進行的(可分析jquery.autocomplete.js第 92行),在IE6中,當輸入法打開時,輸入的字符是不會觸發(fā)”keydown”的,只有中文輸入完畢才觸發(fā)之,所以中文輸入和latin文沒有區(qū)別的;但在firefox3.0下,無論輸入法打開否,按鍵都會觸發(fā)”keydown”事件,所以造成中文輸入完畢,自動匹配的是剛才打出的部分中文拼音字母。 ------所以只有Firefox有問題。
解決方法:
網(wǎng)上查到的最多做法是修改jquery.autocomplete.js第92行,將”keydown”替換為”keyup”,但這個不是根本辦法,雖然這樣改后可在firefox中及時對輸入的中文進行自動匹配,但將原插件中回車、tab等重要的事件機制破壞了,比如這樣改后,如果你的input是在一個form里的話,回車從原來的將選定項輸入到input中變?yōu)榱酥苯犹峤籪orm表單了,這并不是我們想要的。
我的方法原理是,補充一個原插件觸發(fā)查詢的事件,就是當input輸入欄發(fā)生字符變化時,重新進行查詢(調(diào)用其內(nèi)部的onChange函數(shù)),這里主要針對firefox而言,因為我們的系統(tǒng)訪問最多的是IE和firefox。而恰好firefox有一個input變化的事件就是oninput,那么我們只要在原jquery.autocomplete.js第199行,插入如下代碼:
復(fù)制代碼 代碼如下:
.bind("input", function() {
// @hack:support for inputing chinese characters in firefox
onChange(0, true);
});
插入后,代碼大概如下:
復(fù)制代碼 代碼如下:
...
...
jQueryinput.unbind();
jQuery(input.form).unbind(".autocomplete");
}).bind("input", function() {
// @hack:support for inputing chinese characters in firefox
onChange(0, true);
});
...
您可能感興趣的文章:
- 按Enter鍵觸發(fā)事件的jquery方法實現(xiàn)代碼
- jquery實現(xiàn)按Enter鍵觸發(fā)事件示例
- 基于jquery的button默認enter事件(回車事件)。
- jquery 按鍵盤上的enter事件
- jQuery事件之鍵盤事件(ctrl+Enter回車鍵提交表單等)
- 基于Jquery的實現(xiàn)回車鍵Enter切換焦點
- Jquery利用mouseenter和mouseleave實現(xiàn)鼠標經(jīng)過彈出層且可以點擊
- 基于Jquery的回車成tab焦點切換效果代碼(Enter To Tab )
- jQuery響應(yīng)enter鍵的實現(xiàn)思路
- jquery實現(xiàn)tab鍵進行選擇后enter鍵觸發(fā)click行為
相關(guān)文章
jQuery md5加密插件jQuery.md5.js用法示例
這篇文章主要介紹了jQuery md5加密插件jQuery.md5.js用法,結(jié)合實例形式簡單分析了jQuery md5加密插件jquery.md5.js的簡單使用技巧,需要的朋友可以參考下2018-08-08
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
很多網(wǎng)站都是使用這種方式引入,客戶的瀏覽器可能已經(jīng)緩存過了 jquery??梢灾苯诱{(diào)用本地的,速度更快2011-04-04
jQuery利用DOM遍歷實現(xiàn)商城結(jié)算系統(tǒng)實戰(zhàn)
這篇文章主要介紹了jQuery利用DOM遍歷實現(xiàn)商城結(jié)算系統(tǒng)實戰(zhàn),文章圍繞主題展開詳細的內(nèi)容介紹,具一定的參考價值,感興趣的小伙伴可以參考一下2022-06-06

