修改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循环遍历JSON数据的方法
Jul 08 Javascript
Bootstrap按钮下拉菜单组件详解
May 10 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 Javascript
微信小程序数据存储与取值详解
Jan 30 Javascript
一个简单的node.js界面实现方法
Jun 01 Javascript
前后端如何实现登录token拦截校验详解
Sep 03 Javascript
JS中验证整数和小数的正则表达式
Oct 08 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 Javascript
详解Element-UI中上传的文件前端处理
Aug 07 Javascript
JavaScript单线程和任务队列原理解析
Feb 04 Javascript
详解JavaScript执行模型
Nov 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
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
php实现微信公众号无限群发
2015/10/11 PHP
PHPStrom 新建FTP项目以及在线操作教程
2016/10/16 PHP
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
js使用generator函数同步执行ajax任务
2017/09/05 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
2019/08/07 Javascript
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
[01:04]不如跳舞!DOTA2新英雄玛尔斯的欢乐日常
2019/03/11 DOTA
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
六行python代码的爱心曲线详解
2019/05/17 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
python中for in的用法详解
2020/04/17 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
python3跳出一个循环的实例操作
2020/08/18 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
python3.9实现pyinstaller打包python文件成exe
2020/12/13 Python
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
Gucci法国官方网站:意大利奢侈品牌
2018/07/25 全球购物
旅游管理毕业生自荐书
2014/02/02 职场文书
大二法学专业职业生涯规划范文
2014/02/12 职场文书
质量月活动总结
2014/08/26 职场文书
宾馆安全管理制度
2015/08/06 职场文书
《海上日出》教学反思
2016/02/23 职场文书