社会化媒体
了解更多>>
桂ICP备 号
桂公网安备 36号
阅读下一篇
自媒体运营攻略
行业经验交流
Hi，在你登录以后，就可以永久免费的收藏任何您感兴趣的内容，关注感兴趣的作者！
请输入正确的邮箱
已有帐号请点击
帐号创建成功！
我们刚刚给你发送了一封验证邮件
请在48小时内查收邮件,并按照提示验证邮箱
感谢你对微口网的信任与支持
如果你没有收到邮件，请留意垃圾箱 或 重新发送
你输入的邮箱还未注册
还没有帐号请点击
你输入的邮箱还未注册
又想起来了？
邮件发送成功！
我们刚刚给你发送了一封邮件
请在5分钟内查收邮件,并按照提示重置密码
感谢你对微口网的信任与支持
如果你没有收到邮件，请留意垃圾箱 或 重新发送
对不起，你的帐号尚未验证
如果你没有收到邮件，请留意垃圾箱 或
意见与建议
请留下您的联系方式
* 留下您正确的联系方式，以便工作人员尽快与你取得联系
新！变现功能上线
现在，只要登录微口网账号，点击“我要变现”，就能领取任务，轻松推广商品，坐收丰厚佣金，只要一分钟操作，就能获取50%超高提成！
合适的商品更容易推广，你可以根据公众号定位，选择调性最适合推广的商品；如果没有公众号，你也可以选择自己喜爱或者符合自己品味的商品。
优秀的产品文案能让我们赚更多钱，你可以直接使用我们平台提供的文案素材；如果你不想用，那么你可以自己随心撰写合适的产品文案。
关于购买链接
你可以将购买链接粘贴在“阅读原文”处；或者分享购买链接/二维码至社交平台或社交群内。只要有用户通过此链接购买了商品即可获得丰厚提成！
转藏至我的藏点关于手机端IOS系统微信中虚拟键盘遮挡input输入框问题的解决方案 - CSDN博客
关于手机端IOS系统微信中虚拟键盘遮挡input输入框问题的解决方案
手机端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&
display:block;
position:fixed;
width:100%;
height:50px;
font-size:2rem;
background-color:#393a3f;
z-index:99;
display:block;
position:absolute;
bottom:50px;
width:100%;
height:auto;
background-color:#ebebeb;
overflow-y:scroll;
-webkit-overflow-scrolling:touch;
#returnframe{
display:block;
position:fixed;
width:100%;
height:50px;
background-color:#f4f4f4;
border-top:1px solid #d8d8d8;
z-index:99;
顶部栏和底部输入栏使用的是相对于视窗定位的fixed固定定位，中部聊天窗口使用的是absolute绝对定位，同时设定其距离顶部和底部50（顶部和底部的高度），overflow-y:scroll（若中部聊天窗口内容过长则使用滚轮显示超出部分的内容）
该布局在Android的系统中不论是系统自带还是第三方软键盘唤起时都没有出现输入框被遮挡的现象，而在苹果的IOS系统环境下则出现了遮挡现象
最初在网上搜集解决的办法中了解到，IOS对于CSS的fixed固定定位支持程度并不好，即便是部分Android机型对其兼容性也较低，极易出现各种奇葩的BUG，举例如下
经过思考和资料查阅，可以总结出以上问题发生的根本原因：
手机端对于CSS的fixed固定定位本身加兼容性不佳，导致fixed失效或被默认变成为absolute定位，使布局发生变化
第三方输入法，以百度输入法为例，在输入时会有一个toolbar，这就导致即使输入框已经随软键盘弹起，但正好被toolbar挡住绝大部分内容
部分键盘可能浮动于上层，在不影响布局的前提下恰好对输入栏形成了视觉遮挡
根据问题发生的根本原因，通过网络资料查阅，整理出以下的大人们的部分解决方案
网上达人们思考的各种解决方案：
原理：通过插件中的方案从而监听键盘弹出事件或者改变布局结构，使键盘弹出时整体界面上移
优点：统一在Android和IOS系统上的体验效果，在达到目的的同时减少触发其他BUG的可能
缺点：插件的导入会增大文件的整体体积，同时影响页面响应时间
原理：若内容在可视域内则它什么也不做，若不在可视域，则使输入框出现在可视域范围内
优点：解决方法简单，较为折中
缺点：可能会触发其视觉上的bug,实现的效果不确定，即输入框出现的位置在各个设备上有所差别甚至没有得到解决
原理：通过更改设计稿的设计，使页面中的输入和相关内容尽量出现在页面的上50%部分，或者将输入框设置为弹出层，输入时弹出层赞软键盘上方，从而使键盘弹出时不造成遮挡，影响视觉
优点：根本上避免软键盘遮挡输入内容的问题
缺点：更改设计稿在设计前就和设计师充分沟通，但不是总能在进行每个项目时都能及时赶上，同时不能确定设计师和客户是否会做出让步（嗯，你懂的）
原理：通过js监听resize事件同时实时获取或计算每一种弹出的软键盘高度以改变输入框位置
优点：简单粗暴
缺点：若不是在底层Android编程时实现，仅通过js拿不到键盘的弹起/收起事件，同时ios上键盘弹起/收回不会触发window.resize事件，android4.4以下, 键盘唤起时, 不仅会触发resize, 还会额外会触发scroll事件，整体上造成出现了各种新的不确定因素
原理：通过Native.js，后去webview的高度，屏幕的高度，状态栏的高度，从而计算出每次弹出的软键盘的高度
优点：快速解决问题的同时能加深对js和native.js的理解
缺点：需要判断平台，同时要求使用者掌握的技术水平较高，因为Native.js是直接调用Native API，需要对Native API有一定了解，知道所需要的功能调用了哪些原生API，能看懂原生代码并参考原生代码修改为JS代码
原理：导入iScroll框架，通过它来模拟滚动效果，取代原有的滚动，从而在软键盘弹出，改变滚动条的同时改变输入框和页面的位置
优点：在解决问题的同时还能做其他拓展（iscroll是个轻量的好东西）
缺点：会对页面响应速度有些许影响，同时需要了解iScroll的各类参数设定
原理：判断是否是IOS终端，当输入框获得焦点时候，等待一定时间（键盘弹出动画时间）后滚动到页面底部
优点：实现方法较为简单，不依赖于第三方代码加入
最终解决方案
先参考了大神的方案
然后是自己理解后对自己代码的更改
display:block;
position:absolute;
width:100%;
height:50px;
font-size:2rem;
background-color:#393a3f;
z-index:99;
display:block;
position:absolute;
bottom:50px;
width:100%;
height:auto;
background-color:#ebebeb;
overflow-y:scroll;
-webkit-overflow-scrolling:touch;
#returnframe{
display:block;
position:absolute;
width:100%;
height:50px;
background-color:#f4f4f4;
border-top:1px solid #d8d8d8;
z-index:99;
上面的CSS中，首先将顶部和底部原来的fixed固定定位修改为了absolute绝对顶为，从而避免fixed存在于各类手机端系统上的兼容性问题，同时避免在底部输入栏在定位形式发生改变时造成的居中显示问题
var bfscrolltop = document.body.scrollT
$("input.inputframe").focus(function(){
interval = setInterval(function(){
document.body.scrollTop = document.body.scrollH
}).blur(function(){
clearInterval(interval);
document.body.scrollTop =将软键盘唤起前的浏览器滚动部分高度重新赋给改变后的高度
在第三方软键盘被唤起时，浏览器内所有内容高度发生了改变，将他赋给浏览器滚动部分高度，从而使页面改变，同时始终能在键盘唤起的相近时间内正确对应到相应位置，从而使输入框在视觉上能仅仅贴住被唤起的软键盘+toolbar顶端，解决了输入框被遮挡和或顶部栏消失问题
以上就是解决第三方软键盘遮挡输入框问题的方案。。。
你说我今天为什图那么少？。。。。。。
因为被这个问题折腾了一天脑子有点糊了
本文已收录于以下专栏：
相关文章推荐
最近的项目做得是混合开发，其实比较尴尬的啦，手机端的安卓与ios挺多兼容问题的。
1、手机端h5页面中输入法键盘会遮挡输入框的问题。
      $('input').on('focus',fun...
由于公司需求，需要做一个实时对话的聊天功能。遇到各种小坑就不多说了，下面就记录一下遇到最坑的一个问题。。
界面布局写完后，在Android和iOS系统下测试了一下，问题来了！！！在Android系统...
http://blog.csdn.net/enuola/article/details/7917221
 做IOS开发时，难免会遇到输入框被键盘遮掩的问题。上网上搜索了很多相关的解决方案，看...
是这样的，现在有一个这样的页面：
      
      这个页面刚好一屏幕大小，所以没有滚动条，因为“保存”键上面那个项目备注是需要用户去填写的，当他点击后就会出现虚拟键盘，但安卓手机弹出键盘会遮...
做IOS开发时，难免会遇到输入框被键盘遮掩的问题。上网上搜索了很多相关的解决方案，看了很多，但是由衷的觉得太麻烦了。
    有的解决方案是将视图上的所有的东西都添加到一个滚动视图对象（ UIScr...
$(document).on(&click&, &.name&, function() {
alert(&name&);
});以上代码在电脑浏览器和安卓上都能触发alert事件，但是在...
场景描述， 当document的高度不够window的高度时候，如在ip6中文档的高度比窗体的高度小，到底设计在最下方的区域没有在窗体最下方，就留有空白地方如下图的灰色部分
1、 解决初始化...
iOS下Html页面中input获取焦点弹出键盘时挡问题
1.ios之所以会遮挡输入框, 是因为, 第三方输入法的tool bar 或者 键盘也被当做可视区域了(包含在键盘弹出时的wind...
请在这里查看示例 ? cover示例经验须知
弹出软键盘时：
ios端$(‘body’).scrollTop()会改变
android端$(window).height()会改变
拉起键盘不是一瞬间...
innerHTML,outerHTML,insertAdjacentHTML
他的最新文章
讲师：吴岸城
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)苹果园为iOS用户提供和下载，最新的、、、等，分享最权威的资讯、、及解决办法，拥有最火爆的，苹果园一家专注解决iOS所求的网站。