修改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代码
Jan 10 Javascript
js中同步与异步处理的方法和区别总结
Dec 25 Javascript
js中日期的加减法
May 06 Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 Javascript
javascript实现查找数组中最大值方法汇总
Feb 13 Javascript
AngularJS实现路由实例
Feb 12 Javascript
angularjs实现table增加tr的方法
Feb 27 Javascript
vue-cli2.9.3 详细教程
Apr 23 Javascript
Vue脚手架的简单使用实例
Jul 10 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
js实现GIF动图分解成多帧图片上传
Oct 24 Javascript
vue+axios 拦截器实现统一token的案例
Sep 11 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中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
php 在文件指定行插入数据的代码
2010/05/08 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
vue中tab选项卡的实现思路
2018/11/25 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
jQuery实现日历效果
2020/09/11 jQuery
Python实现的选择排序算法示例
2017/11/29 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
pandas的resample重采样的使用
2020/04/24 Python
简单介绍CSS3中Media Query的使用
2015/07/07 HTML / CSS
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
代码中finally中的代码会不会执行
2012/02/06 面试题
酒店中秋节促销方案
2014/01/30 职场文书
企业标语口号
2014/06/10 职场文书
农村党支部书记党群众路线四风问题整改措施
2014/09/26 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
小学教师岗位职责
2015/04/02 职场文书
社区安全温馨提示语
2015/07/14 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
送给客户微信问候语!
2019/07/04 职场文书
用php如何解决大文件分片上传问题
2021/07/07 PHP
Flask response响应的具体使用
2021/07/15 Python