修改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 代码集(学习js的朋友可以看下)
Jul 22 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
Dec 29 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 Javascript
jQuery原理系列-常用Dom操作详解
Jun 07 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
微信小程序 下拉菜单简单实例
Apr 13 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 Javascript
关于微信小程序登录的那些事
Jan 08 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中的cookie不用刷新就生效的方法
2012/02/04 PHP
显示youtube视频缩略图和Vimeo视频缩略图代码分享
2014/02/13 PHP
php实现12306余票查询、价格查询示例
2014/04/17 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
JS获取复选框的值,并传递到后台的实现方法
2016/05/30 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
python持久性管理pickle模块详细介绍
2015/02/18 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
利用numpy实现一、二维数组的拼接简单代码示例
2017/12/15 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
马智宇结婚主持词
2014/04/01 职场文书
大学本科生职业生涯规划书范文
2014/09/14 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS