这是一个笔记博客

分类标签

当前:首页 > 关于手机端IOS系统微信中虚拟键盘遮挡input输入框问题的解决方案

关于手机端IOS系统微信中虚拟键盘遮挡input输入框问题的解决方案

2018-06-04 13:47    浏览量:0    作者

手机端IOS系统微信中虚拟键盘遮挡input输入框问题解决方案

最近在工作中遇到了一个关于手机端IOS系统的第三方软键盘唤起导致底部输入框被遮挡的问题,具体情况是要求实现一个手机端在线聊天页面,需要仿微信的聊天页面,一开始整个页面的布局是这样的:

这里写图片描述

基本HTML结构

<div class="nav"></div>
<div class="content"></div>
<div id="returnframe">
   <input type="text" name="inputframe" class='inputframe'>
   <div class="returnframe_button">发送</div>
</div>

在第三方软键盘被唤起时,浏览器内所有内容高度发生了改变,将他赋给浏览器滚动部分高度,从而使页面改变,同时始终能在键盘唤起的相近时间内正确对应到相应位置,从而使输入框在视觉上能仅仅贴住被唤起的软键盘+toolbar顶端,解决了输入框被遮挡和或顶部栏消失问题

以上就是解决第三方软键盘遮挡输入框问题的方案。。。 
这里写图片描述 
你说我今天为什图那么少?。。。。。。

这里写图片描述 
因为被这个问题折腾了一天脑子有点糊了

 

转自--https://blog.csdn.net/github_37533433/article/details/66471962

推荐阅读