修改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中的屏蔽的使用示例
Jul 30 Javascript
artDialog双击会关闭对话框的修改过程分享
Aug 05 Javascript
JavaScript 获取任一float型小数点后两位的小数
Jun 30 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
jQuery实现底部浮动窗口效果
Sep 07 Javascript
JS不完全国际化&本地化手册 之 理论篇
Sep 27 Javascript
JavaScript中数组Array方法详解
Feb 27 Javascript
深入理解ES6的迭代器与生成器
Aug 19 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 09 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
德生PL330的评价与改造
2021/03/02 无线电
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
PHP之uniqid()函数用法
2014/11/03 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
php实现简单的权限管理的示例代码
2017/08/25 PHP
用js实现随机返回数组的一个元素
2007/08/13 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
jQuery实现可用于博客的动态滑动菜单
2015/03/09 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
ng2学习笔记之bootstrap中的component使用教程
2017/03/09 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
解决AngualrJS页面刷新导致异常显示问题
2017/04/20 Javascript
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
JavaScript运行原理分析
2018/02/09 Javascript
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
Python 流程控制实例代码
2009/09/25 Python
python简单分割文件的方法
2015/07/30 Python
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
实例讲解Python中SocketServer模块处理网络请求的用法
2016/06/28 Python
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
Python将一个Excel拆分为多个Excel
2018/11/07 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
十岁生日家长答谢词
2014/01/17 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
Python实现归一化算法详情
2022/03/18 Python
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏