修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交


Posted in Javascript onOctober 11, 2009

但唯一遗憾的是,在对中文输入法打开时,firefox3.0中是对中文拼音的自动匹配,而对输入后的中文无法及时触发匹配;而在我的IE6.0下,则无此问题。
原因分析:
Autocomplete插件对用户输入字符的触发自动匹配是通过”keydown”事件进行的(可分析jquery.autocomplete.js第 92行),在IE6中,当输入法打开时,输入的字符是不会触发”keydown”的,只有中文输入完毕才触发之,所以中文输入和latin文没有区别的;但在firefox3.0下,无论输入法打开否,按键都会触发”keydown”事件,所以造成中文输入完毕,自动匹配的是刚才打出的部分中文拼音字母。 ------所以只有Firefox有问题。
解决方法:
网上查到的最多做法是修改jquery.autocomplete.js第92行,将”keydown”替换为”keyup”,但这个不是根本办法,虽然这样改后可在firefox中及时对输入的中文进行自动匹配,但将原插件中回车、tab等重要的事件机制破坏了,比如这样改后,如果你的input是在一个form里的话,回车从原来的将选定项输入到input中变为了直接提交form表单了,这并不是我们想要的。
我的方法原理是,补充一个原插件触发查询的事件,就是当input输入栏发生字符变化时,重新进行查询(调用其内部的onChange函数),这里主要针对firefox而言,因为我们的系统访问最多的是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); 
}); 
...
Javascript 相关文章推荐
一段批量给页面上的控件赋值js
Jun 19 Javascript
javascript计算用户打开网页的停留时间
Jan 09 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 Javascript
Javascript Memoizer浅析
Oct 16 Javascript
基于javascript实现单选及多选的向右和向左移动实例
Jul 25 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
JavaScript函数中关于valueOf和toString的理解
Jun 14 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
JavaScript常用事件介绍
Jan 21 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
Sep 09 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 Javascript
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 #Javascript
js css样式操作代码(批量操作)
Oct 09 #Javascript
防止动态加载JavaScript引起的内存泄漏问题
Oct 08 #Javascript
JavaScript delete 属性的使用
Oct 08 #Javascript
有效的捕获JavaScript焦点的方法小结
Oct 08 #Javascript
Javascript isArray 数组类型检测函数
Oct 08 #Javascript
JavaScript 监听textarea中按键事件
Oct 08 #Javascript
You might like
php共享内存段示例分享
2014/01/20 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
javascript 面向对象思想 附源码
2009/07/07 Javascript
JavaScript QueryString解析类代码
2010/01/17 Javascript
Javascript Memoizer浅析
2014/10/16 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
纯javascript版日历控件
2016/11/24 Javascript
vue.js单页面应用实例的简单实现
2017/04/10 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
Linux下使用python自动修改本机网关代码分享
2015/05/21 Python
python实现爬取千万淘宝商品的方法
2015/06/30 Python
Python3访问并下载网页内容的方法
2015/07/28 Python
python放大图片和画方格实现算法
2018/03/30 Python
python实现顺序表的简单代码
2018/09/28 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
django认证系统实现自定义权限管理的方法
2019/08/28 Python
python 弧度与角度互转实例
2020/04/15 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
Jo Malone美国官网:祖玛珑香水
2017/03/27 全球购物
英国领先的酒杯和水晶玻璃器皿制造商:Dartington Crystal
2019/06/23 全球购物
高中毕业生自我鉴定
2013/11/03 职场文书
财务副总经理工作职责
2013/11/25 职场文书
简历的个人自我评价范文
2014/01/03 职场文书
红旗方阵解说词
2014/02/12 职场文书
C++程序员求职信
2014/05/07 职场文书
三严三实学习心得体会
2014/10/13 职场文书
工作失职检讨书(精华篇)
2014/10/15 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
党员廉政准则心得体会
2016/01/20 职场文书
python随机打印成绩排名表
2021/06/23 Python
redis缓存存储Session原理机制
2021/11/20 Redis