修改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刷新当前页面的几种方法总结
Dec 24 Javascript
浅谈JavaScript 框架分类
Nov 10 Javascript
聊一聊JS中this的指向问题
Jun 17 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 Javascript
javascript兼容性(实例讲解)
Aug 15 Javascript
gulp安装以及打包合并的方法教程
Nov 19 Javascript
微信小程序如何实现精确的日期时间选择器
Jan 21 Javascript
vuex存取值和映射函数使用说明
Jul 24 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 Javascript
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
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定义函数代码
2015/02/26 PHP
PHP生成json和xml类型接口数据格式
2015/05/17 PHP
JavaScript 事件参考手册
2008/12/24 Javascript
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
Javascript 刷新全集常用代码
2009/11/22 Javascript
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
2016/12/24 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
2018/08/31 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
深入浅析javascript函数中with
2018/10/28 Javascript
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
es6数据变更同步到视图层的方法
2019/03/04 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
Python2.x利用commands模块执行Linux shell命令
2016/03/11 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
Django2.1.7 查询数据返回json格式的实现
2020/12/29 Python
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
2016年小学生迎国庆广播稿
2015/12/18 职场文书
大学生社区义工服务心得体会
2016/01/22 职场文书
Django如何创作一个简单的最小程序
2021/05/12 Python
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏