修改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 相关文章推荐
转义字符(\)对JavaScript中JSON.parse的影响概述
Jul 17 Javascript
Javascript实现视频轮播在pc端与移动端均可
Sep 29 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
Mar 03 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
微信小程序中setInterval的使用方法
Sep 29 Javascript
更优雅的微信小程序骨架屏实现详解
Aug 07 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 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 base64+gzinflate压缩编码和解码代码
2008/10/03 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
详解javascript appendChild()的完整功能
2018/08/18 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
python有证书的加密解密实现方法
2014/11/19 Python
Python提取网页中超链接的方法
2016/09/18 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
使用python存储网页上的图片实例
2018/05/22 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
python使用pygame实现笑脸乒乓球弹珠球游戏
2019/11/25 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
成人教育自我鉴定
2013/11/01 职场文书
药品业务员岗位职责
2014/04/17 职场文书
社区两委对照检查材料
2014/08/23 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
工作检讨书怎么写
2014/10/10 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
靠谱准确的求职信
2019/04/02 职场文书
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python