修改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 相关文章推荐
ext 同步和异步示例代码
Sep 18 Javascript
基于jquery库的tab新形式使用
Nov 16 Javascript
纯JS实现本地图片预览的方法
Jul 31 Javascript
你有必要知道的25个JavaScript面试题
Dec 29 Javascript
分享ES6的7个实用技巧
Jan 18 Javascript
Vue header组件开发详解
Jan 26 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
JS实现的视频弹幕效果示例
Aug 17 Javascript
vue从零实现一个消息通知组件的方法详解
Mar 16 Javascript
JS字符串和数组如何实现相互转化
Jul 02 Javascript
uni-app实现获取验证码倒计时功能
Nov 01 Javascript
VUE使用draggable实现组件拖拽
Apr 06 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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
php zend 相对路径问题
2009/01/12 PHP
PHP无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
PHP URL路由类实例
2013/11/12 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
PHP中trait使用方法详细介绍
2017/05/21 PHP
laravel Validator ajax返回错误信息的方法
2019/09/29 PHP
js活用事件触发对象动作
2008/08/10 Javascript
让你的网站可编辑的实现js代码
2009/10/19 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
vue调用高德地图实例代码
2017/04/28 Javascript
bootstrap3-dialog-master模态框使用详解
2017/08/22 Javascript
jquery select插件异步实时搜索实例代码
2017/10/20 jQuery
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
Python中的生成器和yield详细介绍
2015/01/09 Python
Python实现包含min函数的栈
2016/04/29 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
Python Logging 日志记录入门学习
2018/06/02 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
Python requests模块实例用法
2019/02/11 Python
Python @property原理解析和用法实例
2020/02/11 Python
pyecharts绘制中国2020肺炎疫情地图的实例代码
2020/02/12 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
python实现邮件循环自动发件功能
2020/09/11 Python
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
《自选商场》教学反思
2014/02/14 职场文书
中餐厅经理岗位职责
2014/04/11 职场文书
2015年个人思想总结
2015/03/09 职场文书
立春观后感
2015/06/18 职场文书
初任公务员培训心得体会
2016/01/08 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android