问题描述

im聊天H5页面,在iOS系统下,inpu获取焦点弹出系统虚拟键盘时,会出现挡住input的情况,十分影响用户体验。


bug图


解决方法:

html:
  <input type="text" v-model="msg" maxlength="500" ref="inputShow" @click="inputShow" />
js:

setTimeout(()=>{
  this.$refs.inputShow.scrollIntoView();
  document.body.scrollTop = document.body.scrollHeight;
},100)

问题描述

  在IOS键盘点击发送并不会执行按钮事件

解决方法

1、在 mounted 生命周期里面 加一个全局事件监听

    document.body.addEventListener('focusout', () => {
//软键盘关闭事件 }) 2、给input加失去焦点事件

记录走过的路,踩过的坑,互勉。

  前端交流群:87709616

有不同意见的可以留言,我们一起讨论。

【土旦】vue 解决ios H5底部输入框 获取焦点时弹出虚拟键盘挡住输入框 以及监听键盘收起事件的更多相关文章

  1. 移动端页面中点击input输入框的时候弹出的键盘将输入框挡住的问题

    使用的是vux框架, 以为是框架问题, 后来发现是把当前页面的高度写死为了height:200%: 只要把高度去掉就能让页面自动弹到输入框的上方:

  2. Xcode6.1模拟器ios8.1模拟器不能弹出虚拟键盘及虚拟键盘无法切换中文输入的解决办法

    1.不能弹出虚拟键盘的解决办法 模拟器菜单Hardware->Keyboard->Connect Hardware Keyboard取消选中,快捷键commad+shift+K 2.虚拟键 ...

  3. AppCompatActivity 去掉标题栏和EditText弹出软键盘遮住输入框问题

    1. AppCompatActivity去掉标题栏 此处除掉标题栏,需要注意一点,AppCompactActivity是继承自Activity.然而,AppCompactActivity据查看网上资料 ...

  4. IOS 固定定位底部input输入框,获取焦点时弹出的输入法键盘挡住input

    移动页面经常会做到这样一个效果,看下面的图片,重点就是那个固定定位的底部,里面有个input输入框,在输入字符的时候,安卓手机看着是完全没有问题! 1.页面没有点击底部input的初始状态 2.安卓手 ...

  5. 解决在IE里预览时弹出:为了有利于保护安全性......

    用Dreamweaver做网页,在IE里预览时弹出这个:为了有利于保护安全性,Internet Explorer 已限制此网页运行可以访问计算机的脚本或ActiveX控件. 在页面顶部加段代码就可以了 ...

  6. 解决eclipse中运行web项目时弹出的"Port 8080 required by Tomcat 9.0 Server at localhost is already in use...

    1.tomcat默认端口是8080,可以修改通过tomcat的端口 修改tomcat\conf\server.xml     结果运行程序,还是报"Port 8080 required by ...

  7. 移动端 输入框 input 被弹出来的键盘 挡住

    给被挡住的input或者textarea加一个id,然后在click事件里调用下面的代码 document.querySelector('#xxx').scrollIntoView();

  8. iOS 解决键盘挡住输入框的问题

    iOS开发中经常会用到输入框UITextField,所以也常会遇到键盘挡住输入框而看不到输入框的内容. 在这里记录一种方法,用UITextField的代理来实现View的上移来解决这个问题. 首先设置 ...

  9. h5软键盘挡住输入框问题解决(android)

    问题 移动端浏览器中的表单在部分android机型上测试,点击靠下的输入框时会遇到弹出的软键盘挡住输入框问题 ios可自身弹起(ios自身的调整偶尔也会出问题,例如第三方键盘会遮挡,原因是第三方输入法 ...

随机推荐

  1. BZOJ4241历史研究题解

    题目连接 很显然可以想到分块,用f[i][j]表示块i到块j的ans,然后发现答案一定是f[i][j] 或者其他在边角出现的数字 我们在记下g[i][j]从开头到块i中的数字j出现的次数 这样就每一次 ...

  2. PLAY2.6-SCALA(九) WebSockets

    WebSockets是一种支持全双工通信的套接字.现代的html5通过js api使得浏览器天生支持webSocket.但是Websockets在移动端以及服务器之间的通信也非常有用,在这些情况下可以 ...

  3. Eclipse中提示 找不到类 javax.servlet.http.HttpServletResponse

    问题如题, 解决方案如下: 复制tomcat的安装路径下\lib\servlet-api.jar 到WEB-INF/lib下即可.

  4. php 获取客户端的ip、地理信息、浏览器信息、本地真实ip

    转自:http://www.blhere.com/948.html 这是非常实用的php常用类.获取客户端的ip.地理信息.浏览器信息.本地真实ip 1234567891011121314151617 ...

  5. [Linux]环境配置之jdk的安装 标签: jdk服务器linux 2016-08-07 22:18 502人阅读 评论(21)

    这两天服务器崩了,所以需要重新配置环境,然后从头到尾配置了一遍,现在记录总结一下自己这两天的工作,首先是jdk的配置! 很多软件,需要jdk为基础,所以第一个装的就是jdk. 第一步,拷贝文件 首先将 ...

  6. @codeforces - 932F@ Escape Through Leaf

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个 n 个点的树(标号1~n),以结点 1 为根.每个结点 ...

  7. ArcGIS 发布高程服务。10.4

    ArcGIS 发布高程必须是10.21以上,我用10.4. 前端用ArcGIS For API 4.x. ARCGIS很早之前有CS版本的ArcScene,可查看高程TIF文件,但机制和BS的完全不同 ...

  8. 【转载】使用 gnuplot 在网页中显示数据

    来源:http://www.ibm.com/developerworks/cn/aix/library/au-gnuplot/ 简介 gnuplot 是一个用于生成趋势图和其他图形的工具.它通常用于收 ...

  9. AUTO uninstaller 密钥/激活码/破解/注册机 ver 8.9.05 资源下载【转载】

    技术贴:AUTO uninstaller 密钥/激活码/破解/注册机 ver 8.9.05 资源下载 楼主分享几个auto uninstaller密钥破解注册机,可以用于AUTO uninstalle ...

  10. 1<<33这种写法是错的!!!

    1<<33不能这么写,1默认int类型,应该改为(long long)1<<33