移动端踩坑记---------ios下输入法遮挡input

移动端踩坑记———ios下输入法遮挡input

最近项目中遇到了一个比较严重移动端IOS下的Fixed兼容问题,网上也有很多人躺在这个问题上了,现在开始详细讨论一下这个问题.

现在我们先来看一张图,网上有的,暂时先拿来用一下:图片出处

其实还会有一种情况的出现

这是我遇到的问题的情景,因为项目中我们的项目是一个活动的即时聊天室.所以,需要项目一开始用的是一个layim的框架(扯句题外话,从中了解了挺多的关于Wokerman的知识,有兴趣的也可以去看看Workerman),每次唤起软键盘的时候都会遮挡一半或者不遮挡的情况.

首先,我们先要知道为什么出现这两种情况,其实是因为在IOS下fixed属性失效了,所以会出现Sticky footer的input乱飞的问题.这个问题随便百度一下都有所谓的解决方案.

1. onresize事件:
直接排除,因为IOS端并不会触发事件,至少我尝试的时候确实是这样

2.定时器方案:出处 :
这个方法在IOS11以下听说有效(我没试过),但是亲测在IOS11下也是失效了,大概意识就是在触发focus的时候开启定时器,拉到屏幕最低部,然后blur以后会清除这个定时器.这个试过,我也排除了.

 var interval = setInterval(function() {document.body.scrollTop = document.body.scrollHeight
}, 100)

3.布局重构:
就是别用fixed布局了,用Flex布局,然后使用flex-direction: column,纵向布局,但是手机屏幕的滚动可能会出现问题:参考方法
因为我们公司一开始就用框架,所以如果我要改布局的话,在时间和人力上都不允许的.所以只能排除,但是我是推荐这种方案.

4.手动计算(我采纳的方案):
就是通过自己计算弹出高度来计算input到底处于什么位置,然后判断input是否处于对应的位置,如果不在就上移,移动到大概的位置,这个方法的主要缺点是会有一点不自然,大概会有300毫秒的延迟(因为键盘的弹出需要时间,所以需要setTimeout延迟执行).
意思是:IOS中fixed不是失效吗?不是会变成absolute吗?既然这样我就顺着你的absolute进行操作,进行改变位置
现在直接奉上代码:

只是提供解决思路,每个人的实际情况不一样,请自行参考

thatChat.textarea.on('focus', function () {var _this = this;//获得屏幕的高度var $windowHeight = $(window).height();  //vh的计算原理,这个要自己慢慢计算出来var bili = 51.63 / 100;    //这个是input框应该显示的位置,应为全局变量maxheight = Math.floor(bili * $windowHeight);   setTimeout(function () {//框架自己自带的方法,主要用着鉴别设备if (device.ios || device.os == 'mac') {//获取页面卷去的高度var scrollPos = document.body.scrollTop;  //以防出现maxheight计算错误if (scrollPos > maxheight) {   maxheight = scrollPos;}//出现了遮挡的情况,就把footer和主要内容上移if (scrollPos < maxheight) {   //我自己项目的实际移动距离,根据实际情况移动$('.layim-chat-footer,.layim-chat-main').css({'margin-bottom': '12.7vh'     });}}}, 500);
});
thatChat.textarea.on('blur', function () {
//当input失去焦点的时候,取消上移的距离,恢复正常$('.layim-chat-footer,.layim-chat-main').css({'margin-bottom': '0'});
});

具体代码就这些,看起来不复杂,就是操作起来比较麻烦,因为IOS要console.log()操作需要用到weinre这个软件,慢慢地得出结果,然后算出比例值.才能算出大概input移动距离.vh单位的使用主要是为了适配各种大小的手机,在这个项目中,我试过iphone 5和iphone 6p 都基本可以.主要缺点就是因为有定时器的存在,所以用户体验上会有一点不适.

最后,这个方法虽然是暴力简单,但是我不觉得算是解决方法,只能暂且这么做,因为在限定了框架的情况下只能这么使用了.这个方法我也是加载框架底层源码里面的.

所以在写项目的时候,最好是自己进行布局,不要太过依赖于框架的使用,框架只是一种方便开发的工具,不要太过依赖,限制了自己的发展

另外,在我们写项目的时候希望更多地考虑一下兼容问题,尽量少踩点坑,我这边使用的vh就是一个比较错误的使用,推荐使用rem能更好地适配各种尺寸的设备.

这个问题,暂时没有完美的解决方案,所以还是别用fixed布局吧
推荐方案(虽然我没有尝试过):Flex布局解决方案

移动端踩坑记---------ios下输入法遮挡input相关推荐

m3u8 video ios h5_移动端H5页面踩坑记
移动端H5页面踩坑记移动端的样式问题「1. 安卓 font-weight:700;以上才被认为是加粗.」「2. border 在 1px 以内是不被安卓识别的一些 0.5px 的下划线怎么搞?」 ...
windos下 elasticksearch7.13安装踩坑记
windos下 elasticksearch7.13安装踩坑记一,环境配置环境要求 java jdk16下载安装 elasticksearch7.13下载安装遇到的问题 (待更新) 一,环境配置 ...
android小程序_小程序踩坑记
小程序踩坑记希望这个文章能尽量记录下小程序的那些坑,避免开发者们浪费自己的生命来定位到底是自己代码导致的还是啥神秘的字节跳变原因. 前记小程序大多数坑是同一套代码在不同平台上表现不一致导致的,微信 ...
python从入门到实践django看不懂_Python编程：从入门到实践踩坑记 Django
<>踩坑记 Django Django Python 19.1.1.5 模板new_topic 做完书上的步骤后,对主题添加页面经行测试,但是浏览器显示服务器异常. 个人采用的开发环境是 ...
Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
在百度地图中叠加CAD图及GIS数据展示踩坑记
前言在之前的几篇博客中分别介绍了在Cesium中实现与CAD的DWG图叠加显示分析 https://www.cnblogs.com/vjmap/p/16541751.html . 高德地图与CAD ...
微信小程序踩坑记——ColorUI组件的使用
微信小程序踩坑记--组件的使用组件类型 ColorUI Vant weapp ColorUI 首先贴上官网链接:官网链接,GitHub链接简介 ColorUI是一个css库!!!在你引入样式后可以 ...
解决Web移动端Fixed布局的方案（防止页面露底、overflow-scrolling、iOS下的 Fixed + Input BUG现象、isScroll.js）
一些细节处理在细节处理上,其实还有很多要注意的,挑几个实际遇到比较大的问题来说一下: 有时候输入框 focus 以后,会出现软键盘遮挡输入框的情况,这时候可以尝试 input 元素的 scrollI ...
口罩、安全帽识别比赛踩坑记（二）比赛流程及 SSD / YOLO V3 两版本实现
本篇文章主要对比赛流程中的各个环节进行展开说明,并对笔者践行过的代码及更改的地方进行记录.如哪里有侵权请联系笔者进行删除.另外在这里对比赛举办方表示感谢 ~ ~ 其中开源代码会在整理后放在github ...

移动端踩坑记---------ios下输入法遮挡input

移动端踩坑记———ios下输入法遮挡input

移动端踩坑记---------ios下输入法遮挡input相关推荐

最新文章

热门文章