修改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 input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
js 实现复制到粘贴板的功能代码
May 13 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
Oct 15 Javascript
浅谈js中的延迟执行和定时执行
May 31 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
微信小程序教程系列之新建页面(4)
Apr 17 Javascript
js模块加载方式浅析
Aug 12 Javascript
vue初尝试--项目结构(推荐)
Jan 30 Javascript
vue中使用input[type="file"]实现文件上传功能
Sep 10 Javascript
JS数组方法reverse()用法实例分析
Jan 18 Javascript
JavaScript实现页面动态验证码的实现示例
Mar 23 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 第二节 数据类型之数组
2012/04/28 PHP
php生成静态文件的多种方法分享
2012/07/17 PHP
smarty中js的调用方法示例
2014/10/27 PHP
PHP数据库连接mysql与mysqli对比分析
2016/01/04 PHP
PHP的几个常用加密函数
2016/02/03 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
vue 文件目录结构详解
2017/11/24 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
Python中装饰器的一个妙用
2015/02/08 Python
答题辅助python代码实现
2018/01/16 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
解决pymysql cursor.fetchall() 获取不到数据的问题
2020/05/15 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
墨西哥网上购物:Linio墨西哥
2016/10/20 全球购物
客服文员岗位职责
2013/11/29 职场文书
顶岗实习计划书
2014/01/10 职场文书
澳大利亚商务邀请函
2014/01/17 职场文书
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
安全协议书
2014/04/23 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
工作经验交流材料
2014/12/30 职场文书
商超业务员岗位职责
2015/02/13 职场文书
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python