iOS中文输入法多次触发的问题及解决方案
最近要在移动端实现一个文本框实时搜索的功能,即在文本框里每输入一个字,就向服务器请求一次搜索结果。暂且不考虑性能优化问题,第一时间想到的是用keyup实现:
$('input').on('keyup',function() {
AjaxRequest();
});
这在安卓上没有问题,但在iOS上如果使用中文输入或者输入法的预设文本,就不会触发keyup事件,因此也就无法和服务器通信。为解决这个问题,在网上查了些资料,HTML5有专门处理的事件oninput,可以响应实时输入:
$('input').on('input',function() {
AjaxRequest();
});
这样在输入中文时就能监听到文本框的变化了。但还是有问题,在输入中文时,比如“我”字,拼音是“wo”,五笔是"q",均会向服务器发送三次请求,如果打印出来,会得到“我”、“”、“我”三个值,可我只想在“我”字输出到文本框以后再发请求,这时候就需要一个专门的compositionstart和compositionend事件来处理这种情况,这是参考资料。
“compositionstart 事件触发于一段文字的输入之前(类似于 keydown 事件,但是该事件仅在若干可见字符的输入之前,而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词)。“
最后,完整代码如下:
var lock = false;
$('input').on({
input: function() {
if(!lock) AjaxRequest(); //这里再调用一次方法是为了响应退格删除中文
},
compositionstart: function() {
lock = true;
},
compositionend: function() {
lock = false;
AjaxRequest(); //可以响应正常中文输入,但不响应使用退格删除中文
}
});
iOS中文输入法多次触发的问题及解决方案的更多相关文章
- 实时监听input标签输入 实时监听文本框输入 避免中文输入法无法触发onkeyup事件的问题
前言: 对于实时监听输入,这种需求大多数都是用于一个联想字提醒,智能提醒.大家都知道onkeydown,onkeypress,onkeyup的在监听中文输入法或者右键粘贴的时候都存在一些弊端,不是那么 ...
- iOS:UITextField中文输入法输入时对字符长度的限制
如题的问题,又是个让我抓狂了大半天的问题,还是做个记录,有与类似问题的同学可参考,但不一定对.具体问题还需具体分析.我遇到的需求是这样的:有一个输入框,输入框内输入文字,文字字数限制在20字. ...
- JS对输入判断变化屏蔽中文输入法输入时连续触发事件的方法
代码如下: //智能搜索提示 IntelligenceSearch: function IntelligenceSearch() { $('#keyWord').on('input', functio ...
- compositionEnd 和 input 事件(中文输入法问题)
网上用 compositionstart + compositionend + input 解决中文输入法问题的办法 node.addEventListener('compositionstart', ...
- 类似baidu搜索 修正jquery的autocomplete在firefox下不支持中文输入法的bug
解决方法:
- 移动APP 中文输入法下的搜索优化
最近做了一个移动端的搜索功能,带有suggest.实现上并没有什么可说的,但是在后续优化上,特别是在中文输入法的情况下的优化使我学到一些新东西,所以决定写一篇文章. 下面是我简化后的基本功能实现,监听 ...
- kali2.0如何安装中文输入法
由于kali的更新源是国外网站,替换成国内的镜像站,具体操作如下: 打开终端输入 leafpad /etc/apt/sources.list 把下面的源粘贴进去,原有内容注释掉 #中科大源deb ...
- input事件以及中文输入法的处理
在项目的开发过程中,相信大家都处理过监听用户输入的事情,一般我们会用到onkeyup.onkeydown.onkeypress.onchange.oninput事件,虽然都很熟悉了,但是还是有必要巩固 ...
- js中文输入法字符串截断
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- (2)oracle服务、建库
一.oracle的服务 oracle 11g安装后服务一般是7到8个 1.Oracle ORCL VSS Writer Service Oracle卷映射拷贝写入服务(非必须启动) 2.Oracle ...
- 整数划分问题(记忆化搜索和DP方法)
一. 问题 现在有一正整数N,要把它分为若干正整数之和,问有多少种本质不同的分法? (1)其中最大数不超过m, 有多少种分法? (2)分割后的正整数的数目不超过m个, 有多少种分法? (3)分成最大数 ...
- Frequency
题目描述 Snuke loves constructing integer sequences. There are N piles of stones, numbered 1 through N. ...
- php的function() use($args)用法
使用use返回 aaa aaa.使用函数传参数aaa bbb. use的参数必须是已经存在的,如果没有定义返回Notice: Undefined variable: word ,使用函数参数方式不需要 ...
- Matrix.LookAtLH()和Matrix.LookAtRH()所表达的涵义
function lookAtLH(eye:Vector3D, at:Vector3D, up:Vector3D) 一个摄像机矩阵可有由三个部分组成:摄像机位置.目标位置以及摄像机上下方.对应的就是上 ...
- 蛋疼的VS2010 tab group
http://superuser.com/questions/232031/why-does-my-visual-studio-2010-default-to-a-horizontal-windows ...
- PS Tips: powershell 将文件以utf8格式打开并另存
1. powershell 将文件以utf8格式打开并另存 Get-Content .\rep_position_liquidity.csv -Encoding UTF8 | Set-Content ...
- 使用ffmpeg截取视频封面并批量上传
需求:将视频文件压入zip包,然后上传服务器.服务器对zip解压,使用bat/shell,使用ffmpeg对视频进行封面截取.再使用OSS对视频和封面进行批量上传.最后将信息存入数据库 遇到的问题 1 ...
- elasticsearch 基础性操作
1 基础概念 Elasticsearch是一个近实时的系统,从你写入数据到数据可以被检索到,一般会有1秒钟的延时.Elasticsearch是基于Lucene的,Lucene的读写是两个分开的句柄,往 ...
- Scrapy的介绍和用法
转载:https://www.toutiao.com/i6493421606306578958/ Scrapy是爬虫必须学会的一个框架!他确实很难搞的透彻!今天就不给大家全部介绍了!还是介绍其中的Cr ...