修改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 相关文章推荐
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
jQuery实现标题有打字效果的焦点图代码
Nov 16 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
bootstrap css样式之表单
Jan 19 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
require.js中的define函数详解
Jul 10 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
微信小程序渲染性能调优小结
Jul 30 Javascript
使用compose函数优化代码提高可读性及扩展性
Jun 16 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
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
event对象的方法 兼容多浏览器
2009/06/27 Javascript
js 小数取整的函数
2010/05/10 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
jQuery写fadeTo示例代码
2014/02/21 Javascript
文本框水印提示效果的简单实现代码
2014/02/22 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
jQuery设置和移除文本框默认值的方法
2015/03/09 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
Python批量修改文件后缀的方法
2014/01/26 Python
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
用Python编写一个国际象棋AI程序
2014/11/28 Python
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
python 反向输出字符串的方法
2018/07/16 Python
关于python列表增加元素的三种操作方法
2018/08/22 Python
Python 隐藏输入密码时屏幕回显的实例
2019/02/19 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
python自动分箱,计算woe,iv的实例代码
2019/11/22 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
python打开文件的方式有哪些
2020/06/29 Python
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
任意存:BOXFUL
2018/05/21 全球购物
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
2014年大班元旦活动方案
2014/02/26 职场文书
《盘古开天地》教学反思
2014/02/28 职场文书
家长寄语大全
2014/04/02 职场文书
教师暑期培训感言
2014/08/15 职场文书