【土旦】vue 解决ios H5底部输入框 获取焦点时d出虚拟键盘挡住输入框 以及监听键盘收起事件

概述问题描述 im聊天H5页面，在iOS系统下，inpu获取焦点d出系统虚拟键盘时，会出现挡住input的情况，十分影响用户体验。 bug图       解决方法： html： 　　<input type="text" v-model="msg" maxlength="500" ref="inputShow" @click="inputShow" /> js： setTimeout(()=>{　　

问题描述

im聊天H5页面，在iOS系统下，inpu获取焦点d出系统虚拟键盘时，会出现挡住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加失去焦点事件

VIEw Code

 

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

　　前端交流群：87709616

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

总结

以上是内存溢出为你收集整理的【土旦】vue 解决ios H5底部输入框 获取焦点时d出虚拟键盘挡住输入框 以及监听键盘收起事件全部内容，希望文章能够帮你解决【土旦】vue 解决ios H5底部输入框 获取焦点时d出虚拟键盘挡住输入框 以及监听键盘收起事件所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。