最近在做移动端模糊搜索功能,js监听input的keyup事件,在chrom模拟器和android手机环境运行都没有问题,到了ios手机却出现bug,没法实现功能;

查了好一会资料,发现keyup事件在ios系统下存在不兼容问题,解决的方法是通过 html5的 oninput事件来实现,代码如下;

<input id="input" type="text" />
document.querySelector('#input').addEventListener('input',function(){
//do something
});
document.querySelector('#input').oninput=function(){
//do something
}

上面两种写法都可以,android和ios系统都能满足!

IOS系统兼容input keyup事件的更多相关文章

  1. 关于微信手机端IOS系统中input输入框无法输入的问题

    如果网站不需要阻止用户的选择内容的行为就可以使用如下样式: * { -webkit-user-select: text; -user-select: text;}另一种方式: *: not(input ...

  2. IOS下去掉input submit圆角和背景色错误

    在iOS系统下input submit会有圆角,如果添加有背景色,背景色错误,在安卓系统是没有这些问题,可以在input样式加上这段样式 input{ -webkit-appearance: none ...

  3. IOS下去掉input submit圆角和

    在iOS系统下input submit会有圆角,如果添加有背景色,背景色出错,在安卓系统是没有这些问题,可以在input样式加上这段样式 input{ -webkit-appearance: none ...

  4. IOS中input键盘事件keyup 的兼容解决办法

    用input监听键盘keyup事件,在安卓手机浏览器中是可以的,但是在ios手机浏览器中很慢,用输入法输入之后,并未立刻相应keyup事件. 解决办法: 在ios设备上可以用html5的input事件 ...

  5. IOS自带输入法中文不触发KEYUP事件导致vue双向绑定错误问题

    先上图: 可以看到输入框中的内容和弹出框的内容不一致, <input class="am-fr labRight" id="txcode" type=&q ...

  6. IOS中input键盘事件支持的解决方法

    欢迎大家去我的网站详细查看http://genghongshuo.com.cn/ IOS中input键盘事件keyup.keydown.等支持不是很好, 用input监听键盘keyup事件,在安卓手机 ...

  7. IOS系统中使用zepto的live事件绑定不了的一个办法

    IOS系统中使用zepto的live事件绑定不了的一个办法: 对事件对象添加样式:cursor:pointer

  8. ios系统的Date的兼容问题

    内容来源网上,自己记录下 问题1: var date =new Date(); 这个是获取当前系统时间的对象,在各端都可以 但是: var date =new Date("2017-01-2 ...

  9. keydown、input 和 keyup 事件

    keydown.keyup 属于键盘事件,input 属于文本事件. keydown:当用户按下键盘上的任意按键时触发,如果按住不放,会重复触发此事件. keyup:当用户释放键盘上的按键时触发. i ...

随机推荐

  1. echarts在vue里面使用,以及基础配置。

    基础的图表和基础的配置. 效果图如下: 1.安装图表依赖包:npm install echarts 2.在main.js里面 引入echarts import echarts from 'echart ...

  2. Mysql 奇怪的连接错误

    今天,碰到了一个数据库连接问题: 不像之前在linux上mysql连接问题,那是权限设置.而这次问题的起源是: 我想要往mysql导入csv文件,可是因为文件比較大.有88M数据:使用navicatc ...

  3. disruptor实操作手冊(二)

    多消费者场景 上一篇文章介绍了怎样构建一个简单的disruptorproject之后.应该有相当一部分客官骂娘了,确实这种范例在其他地方多的是. 从这篇開始,介绍一些不一样的东西. 一,多个消费者: ...

  4. Android error--No implementation found for native Lcomd

    在利用NDK编译Cpp执行时,出现了No implementation found for native Lcom等错误,调试好久,才发现 XXX.h和XXX.cpp.在XXX.cpp里#includ ...

  5. xhprof安装&amp;&amp;使用

    听同事说起过一个php性能分析扩展,叫xhprof,近期了解了下. XHProf 是一个轻量级的分层性能測量分析器. 在数据收集阶段.它跟踪调用次数与測量数据,展示程序动态调用的弧线图. 它在报告.后 ...

  6. Oracle Hint的用法

    1. /*+ALL_ROWS*/ 表明对语句块选择基于开销的优化方法,并获得最佳吞吐量,使资源消耗最小化. 例如: SELECT /*+ALL+_ROWS*/ EMP_NO,EMP_NAM,DAT_I ...

  7. 6.vi使用

  8. 请求测试——Fiddler2工具(可以测试POST和Get)

    使用参考:http://jingyan.baidu.com/article/dca1fa6fa07000f1a44052f6.html 发送POST请求的时候,需要填写发送类型: 发送JSON格式填写 ...

  9. HTML文档 html,html5,css,css3

    HTML 各种标签及简单应用: http://www.w3school.com.cn 1 <p><p> 2 <br/> 3 <hr/>横线 4 < ...

  10. vue强制绑定css3的缩放效果transfrom:scale()

    vue不提供 transfrom:scale(1.5) : 会报错 ,错误是  "TypeError: _vm.scale is not a function": 原因:Vue将其 ...