修改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 $.each 和for怎么跳出循环终止本次循环
Sep 27 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
JSON对象 详解及实例代码
Oct 18 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
Jquery实时监听input value的实例
Jan 26 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
Bootstrap4 gulp 配置详解
Jan 06 Javascript
Vue插件从封装到发布的完整步骤记录
Feb 28 Javascript
JavaScript对象属性操作实例解析
Feb 04 Javascript
Vue+Element-U实现分页显示效果
Nov 15 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
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
如何在PHP中读写文件
2020/09/07 PHP
jquery.jstree 增加节点的双击事件代码
2010/07/27 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
2019/05/12 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
Opencv求取连通区域重心实例
2020/06/04 Python
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
h5实现获取用户地理定位的实例代码
2017/07/17 HTML / CSS
JAVA中运算符的分类及举例
2015/09/12 面试题
工程师求职简历的自我评价分享
2013/10/10 职场文书
后勤园长自我鉴定
2013/10/17 职场文书
教师应聘个人求职信
2013/12/10 职场文书
班级入场式解说词
2014/02/01 职场文书
部队党性分析材料
2014/02/16 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书