【土旦】vue 解决ios H5底部输入框 获取焦点时弹出虚拟键盘挡住输入框 以及监听键盘收起事件
问题描述
im聊天H5页面,在iOS系统下,inpu获取焦点弹出系统虚拟键盘时,会出现挡住input的情况,十分影响用户体验。
bug图
解决方法:
html:
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底部输入框 获取焦点时弹出虚拟键盘挡住输入框 以及监听键盘收起事件的更多相关文章
- 移动端页面中点击input输入框的时候弹出的键盘将输入框挡住的问题
使用的是vux框架, 以为是框架问题, 后来发现是把当前页面的高度写死为了height:200%: 只要把高度去掉就能让页面自动弹到输入框的上方:
- Xcode6.1模拟器ios8.1模拟器不能弹出虚拟键盘及虚拟键盘无法切换中文输入的解决办法
1.不能弹出虚拟键盘的解决办法 模拟器菜单Hardware->Keyboard->Connect Hardware Keyboard取消选中,快捷键commad+shift+K 2.虚拟键 ...
- AppCompatActivity 去掉标题栏和EditText弹出软键盘遮住输入框问题
1. AppCompatActivity去掉标题栏 此处除掉标题栏,需要注意一点,AppCompactActivity是继承自Activity.然而,AppCompactActivity据查看网上资料 ...
- IOS 固定定位底部input输入框,获取焦点时弹出的输入法键盘挡住input
移动页面经常会做到这样一个效果,看下面的图片,重点就是那个固定定位的底部,里面有个input输入框,在输入字符的时候,安卓手机看着是完全没有问题! 1.页面没有点击底部input的初始状态 2.安卓手 ...
- 解决在IE里预览时弹出:为了有利于保护安全性......
用Dreamweaver做网页,在IE里预览时弹出这个:为了有利于保护安全性,Internet Explorer 已限制此网页运行可以访问计算机的脚本或ActiveX控件. 在页面顶部加段代码就可以了 ...
- 解决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 ...
- 移动端 输入框 input 被弹出来的键盘 挡住
给被挡住的input或者textarea加一个id,然后在click事件里调用下面的代码 document.querySelector('#xxx').scrollIntoView();
- iOS 解决键盘挡住输入框的问题
iOS开发中经常会用到输入框UITextField,所以也常会遇到键盘挡住输入框而看不到输入框的内容. 在这里记录一种方法,用UITextField的代理来实现View的上移来解决这个问题. 首先设置 ...
- h5软键盘挡住输入框问题解决(android)
问题 移动端浏览器中的表单在部分android机型上测试,点击靠下的输入框时会遇到弹出的软键盘挡住输入框问题 ios可自身弹起(ios自身的调整偶尔也会出问题,例如第三方键盘会遮挡,原因是第三方输入法 ...
随机推荐
- BZOJ4241历史研究题解
题目连接 很显然可以想到分块,用f[i][j]表示块i到块j的ans,然后发现答案一定是f[i][j] 或者其他在边角出现的数字 我们在记下g[i][j]从开头到块i中的数字j出现的次数 这样就每一次 ...
- PLAY2.6-SCALA(九) WebSockets
WebSockets是一种支持全双工通信的套接字.现代的html5通过js api使得浏览器天生支持webSocket.但是Websockets在移动端以及服务器之间的通信也非常有用,在这些情况下可以 ...
- Eclipse中提示 找不到类 javax.servlet.http.HttpServletResponse
问题如题, 解决方案如下: 复制tomcat的安装路径下\lib\servlet-api.jar 到WEB-INF/lib下即可.
- php 获取客户端的ip、地理信息、浏览器信息、本地真实ip
转自:http://www.blhere.com/948.html 这是非常实用的php常用类.获取客户端的ip.地理信息.浏览器信息.本地真实ip 1234567891011121314151617 ...
- [Linux]环境配置之jdk的安装 标签: jdk服务器linux 2016-08-07 22:18 502人阅读 评论(21)
这两天服务器崩了,所以需要重新配置环境,然后从头到尾配置了一遍,现在记录总结一下自己这两天的工作,首先是jdk的配置! 很多软件,需要jdk为基础,所以第一个装的就是jdk. 第一步,拷贝文件 首先将 ...
- @codeforces - 932F@ Escape Through Leaf
目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个 n 个点的树(标号1~n),以结点 1 为根.每个结点 ...
- ArcGIS 发布高程服务。10.4
ArcGIS 发布高程必须是10.21以上,我用10.4. 前端用ArcGIS For API 4.x. ARCGIS很早之前有CS版本的ArcScene,可查看高程TIF文件,但机制和BS的完全不同 ...
- 【转载】使用 gnuplot 在网页中显示数据
来源:http://www.ibm.com/developerworks/cn/aix/library/au-gnuplot/ 简介 gnuplot 是一个用于生成趋势图和其他图形的工具.它通常用于收 ...
- AUTO uninstaller 密钥/激活码/破解/注册机 ver 8.9.05 资源下载【转载】
技术贴:AUTO uninstaller 密钥/激活码/破解/注册机 ver 8.9.05 资源下载 楼主分享几个auto uninstaller密钥破解注册机,可以用于AUTO uninstalle ...
- 1<<33这种写法是错的!!!
1<<33不能这么写,1默认int类型,应该改为(long long)1<<33