最近要在移动端实现一个文本框实时搜索的功能,即在文本框里每输入一个字,就向服务器请求一次搜索结果。暂且不考虑性能优化问题,第一时间想到的是用keyup实现:

$('input').on('keyup',function() {
AjaxRequest();
});

这在安卓上没有问题,但在iOS上如果使用中文输入或者输入法的预设文本,就不会触发keyup事件,因此也就无法和服务器通信。为解决这个问题,在网上查了些资料,HTML5有专门处理的事件oninput,可以响应实时输入:

$('input').on('input',function() {
AjaxRequest();
});

这样在输入中文时就能监听到文本框的变化了。但还是有问题,在输入中文时,比如“我”字,拼音是“wo”,五笔是"q",均会向服务器发送三次请求,如果打印出来,会得到“我”、“”、“我”三个值,可我只想在“我”字输出到文本框以后再发请求,这时候就需要一个专门的compositionstartcompositionend事件来处理这种情况,这是参考资料

compositionstart 事件触发于一段文字的输入之前(类似于 keydown 事件,但是该事件仅在若干可见字符的输入之前,而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词)。“

最后,完整代码如下:

var lock = false;
$('input').on({
input: function() {
if(!lock) AjaxRequest(); //这里再调用一次方法是为了响应退格删除中文
},
compositionstart: function() {
lock = true;
},
compositionend: function() {
lock = false;     
AjaxRequest(); //可以响应正常中文输入,但不响应使用退格删除中文
}
});

iOS中文输入法多次触发的问题及解决方案的更多相关文章

  1. 实时监听input标签输入 实时监听文本框输入 避免中文输入法无法触发onkeyup事件的问题

    前言: 对于实时监听输入,这种需求大多数都是用于一个联想字提醒,智能提醒.大家都知道onkeydown,onkeypress,onkeyup的在监听中文输入法或者右键粘贴的时候都存在一些弊端,不是那么 ...

  2. iOS:UITextField中文输入法输入时对字符长度的限制

      如题的问题,又是个让我抓狂了大半天的问题,还是做个记录,有与类似问题的同学可参考,但不一定对.具体问题还需具体分析.我遇到的需求是这样的:有一个输入框,输入框内输入文字,文字字数限制在20字.   ...

  3. JS对输入判断变化屏蔽中文输入法输入时连续触发事件的方法

    代码如下: //智能搜索提示 IntelligenceSearch: function IntelligenceSearch() { $('#keyWord').on('input', functio ...

  4. compositionEnd 和 input 事件(中文输入法问题)

    网上用 compositionstart + compositionend + input 解决中文输入法问题的办法 node.addEventListener('compositionstart', ...

  5. 类似baidu搜索 修正jquery的autocomplete在firefox下不支持中文输入法的bug

    解决方法:

  6. 移动APP 中文输入法下的搜索优化

    最近做了一个移动端的搜索功能,带有suggest.实现上并没有什么可说的,但是在后续优化上,特别是在中文输入法的情况下的优化使我学到一些新东西,所以决定写一篇文章. 下面是我简化后的基本功能实现,监听 ...

  7. kali2.0如何安装中文输入法

    由于kali的更新源是国外网站,替换成国内的镜像站,具体操作如下: 打开终端输入 leafpad /etc/apt/sources.list   把下面的源粘贴进去,原有内容注释掉 #中科大源deb  ...

  8. input事件以及中文输入法的处理

    在项目的开发过程中,相信大家都处理过监听用户输入的事情,一般我们会用到onkeyup.onkeydown.onkeypress.onchange.oninput事件,虽然都很熟悉了,但是还是有必要巩固 ...

  9. js中文输入法字符串截断

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. HDU 1541.Stars-一维树状数组(详解)

    树状数组,学长很早之前讲过,最近才重视起来,enmmmm... 树状数组(Binary Indexed Tree(B.I.T), Fenwick Tree)是一个查询和修改复杂度都为log(n)的数据 ...

  2. Python与数据库[2] -> 关系对象映射/ORM[3] -> sqlalchemy 的声明层 ORM 访问方式

    sqlalchemy的声明层ORM访问方式 sqlalchemy中可以利用声明层进行表格类的建立,并利用ORM对象进行数据库的操作及访问,另一种方式为显式的 ORM 访问方式. 主要的建立步骤包括: ...

  3. 使用 SQL Server 的 uniqueidentifier 字段类型

    原文:使用 SQL Server 的 uniqueidentifier 字段类型 SQL Server 自 2008 版起引入了 uniqueidentifier 字段,它存储的是一个 UUID, 或 ...

  4. 【TCP/IP】IP路由选择

    IP层在内存中有一个路由表,当有数据要发送时.它要对该表进行一次搜索以确认转发地址.收到的数据到达IP层时,IP层会检查数据报的目的地址是否为本机IP或广播IP: 假设是.就依据IP首部协议字段的协议 ...

  5. My97DatePicker控件显示时分秒

    方式一: if (!WebCalendar.timeShow) WebCalendar.dateReg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/; else ...

  6. yolo.v2 darknet19结构

    Darknet19( (conv1s): Sequential( (0): Sequential( (0): Conv2d_BatchNorm( (conv): Conv2d(3, 32, kerne ...

  7. setContentView

    setContentView(R.layout.main)在Android里面,这句话是什么意思? R.layout.main是个布局文件即控件都是如何摆放如何显示的,setContentView就是 ...

  8. 测试用例 自动生成工具PICT与AllPairs

    通常我们在设计或编写测试用例时,存在一个"痛点":要么设计的测试用例存在遗漏,难以100%覆盖测试需求:要么被测系统过于复杂,设计的测试用例过多,导致前期的设计和后续的执行工作量过 ...

  9. 倍福TwinCAT(贝福Beckhoff)基础教程 松下绝对值驱动器如何做初始化设置

    安装调试软件PANATERM 6.0,完成之后可以自动检测到连接的设备(如果软件是之前的版本,则可能无法准确识别A5B系列)   点击试运行,伺服关闭,然后会发现伺服开启按钮可用了   测试正反转没有 ...

  10. CTAssetsPickerController 选中图片不显示对号的问题解决

    转载自:http://blog.csdn.net/qq_27304667/article/details/53218547 早上AppStore审核通过,下载来看看.突然发现一个选择图片时候选中的标识 ...