修改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 相关文章推荐
jQuery使用手册之二 DOM操作
Mar 24 Javascript
javascript实现二分查找法实现代码
Nov 12 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
使用javascript实现json数据以csv格式下载
Jan 09 Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 Javascript
javascript实现图片轮播效果
Jan 20 Javascript
jQuery Mobile操作HTML5的常用函数总结
May 17 Javascript
深入分析node.js的异步API和其局限性
Sep 05 Javascript
BACKBONE.JS 简单入门范例
Oct 17 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
PHP5/ZendEngine2的改进
2006/10/09 PHP
PHP flock 文件锁详细介绍
2012/12/29 PHP
图文介绍PHP添加Redis模块及连接
2015/07/28 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
Zend Framework数据库操作方法实例总结
2016/12/11 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
Vue组件库发布到npm详解
2018/02/17 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
详解vue-cli下ESlint 配置说明
2018/09/03 Javascript
jQuery实现基本淡入淡出效果的方法详解
2018/09/05 jQuery
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
Vue.js仿Select下拉框效果
2020/02/18 Javascript
python多线程编程方式分析示例详解
2013/12/06 Python
解决windows下Sublime Text 2 运行 PyQt 不显示的方法分享
2014/06/18 Python
python中使用序列的方法
2015/08/03 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
Python创建数字列表的示例
2019/11/28 Python
骆驼官方商城:CAMEL
2016/11/22 全球购物
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
荷兰家电销售网站:Welhof
2020/12/08 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
司机检讨书
2014/02/13 职场文书
新教师培训方案
2014/06/08 职场文书
postgresql中如何执行sql文件
2023/05/08 PostgreSQL