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

最新推荐文章于 2022-10-09 15:16:30 发布
最新推荐文章于 2022-10-09 15:16:30 发布
阅读量6.9k 收藏 4
点赞数
分类专栏： javascript 文章标签： javascript 兼容 输入法 前端 ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Kim1am/article/details/78762811
版权
本文介绍了在移动端iOS下遇到输入法遮挡input的兼容性问题，并探讨了几种解决办法，包括onresize事件、定时器方案、布局重构和手动计算。作者采用手动计算的方法，通过监听键盘弹出并调整input位置，但存在延迟问题。建议在项目中避免过度依赖框架，优先考虑布局的灵活性，推荐使用Flex布局以减少兼容性问题。
摘要由CSDN通过智能技术生成

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

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

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


遮挡

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


遮挡2

  这是我遇到的问题的情景,因为项目中我们的项目是一个活动的即时聊天室.所以,需要项目一开始用的是一个layim的框架(扯句题外话,从中了解了挺多的关于Wokerman的知识,有兴趣的也可以去看看Workerman

最低0.47元/天 解锁文章
Kim1am
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
IOS 键盘挡住输入框的问题解决办法
08-30
主要介绍了IOS 键盘挡住输入框的问题解决办法的相关资料,需要的朋友可以参考下
ios端 input输入框遮挡问题解决
asdfgh0077的博客
07-10 398
ios端 input输入框遮挡问题解决
移动端的坑（一）
qq_36800701的博客
06-19 217
一般，我们想要禁止橡皮筋效果的话，会给document加阻止默认行为，不过新版的谷歌浏览器不已经不让这么做了，所以现在一般都是在最外层的加个div，然后给它做阻止默认行为，但是阻止了默认行为会带来以下问题阻止默认事件带来的问题： 1)解决IOS10+ safari 以及部分安卓浏览器 不在支持 viewport的最大缩放值和禁止缩放的问题 2)解决IOS10+ safari下给body加overf...
ios-键盘遮挡输入框处理.zip
07-11
键盘遮挡输入框处理
IOS 解决输入框被键盘遮挡问题
06-15
当键盘高度高于输入框的时候，界面向上拉 从而解决输入框遮挡问题
Location-cleaned IOS16.0驱动包
最新发布
11-14
Location-cleaned IOS16.0驱动包，亲测解压复制到drivers目录可用，你值得拥有。IOS16重大更新！需要去设置-隐私-开启开发者模式 需要去设置-隐私-打开开发者模式。没有开发者模式选项的，临时解决方法，下载爱思...
Location-cleaned IOS15.4驱动包
03-31
【标题】"Location-cleaned IOS15.4驱动包"是指针对苹果iOS系统15.4版本进行地理位置信息清理后的驱动程序集合。这样的驱动包通常由开发者或社区成员制作，目的是确保用户在安装后，设备的隐私和安全性得到提升，...
iOS-Tagent-master.zip
06-09
网易airtest for mac必备agent, iOS-Tagent 其实就是 WebDriverAgent 仔细看，会发现iOS-Tagent会比WebDriverAgent简略得多。 iOS-Tagent其实就是WDA的优化版本。 git clone ...
lottie-ios-master.zip
09-09
由Airbnb开发的Lottie是一个将After Effects动画提供给任意一个iOS，macOS，Android还有React Native原生APP的文件库。这些动画通过一个叫Bodymovin的开源After Effects插件，以JSON文件的形式进行输出。Lottie通过...
xash3d-ios:Xash3D iOS端口项目
05-01
Xash3D-iOS项目 您需要安装xcode的osx才能构建它 使用scripts/fetch-projects.sh来获取具有依赖项的引擎 在构建之前运行一次scripts/fill-project.sh 在提交对xcode项目的更改之前，将所有除了dummy.c除外的内容从...
解决ios h5 input输入框被输入法弹出一块区域的问题
01-05
问题：如下图 解决方案 scrollIntoView scrollIntoView(alignWithTop) 滚动浏览器窗口或容器元素，以便在当前视窗的可见范围看见当前元素。如果alignWithTop为true，或者省略它，窗口会尽可能滚动到自身顶部与元素顶部平齐 /** * * 使用方法 输入框中 onclick=sr(this); onblur=nosr(this) */ var timer1; function sr(obj) { timer1 = setInterval(function() { obj.scrollIntoView(false); },
移动端页面开发的“坑”
每天都记录一点点！
10-27 6051
现在的前端开发者基本都要同时着手PC端页面和手机页面的开发工作，就目前的状况来看，手机页面的兼容性要比PC端更为复杂（当然主要是只在android端，大家懂的），而且有些样式在PC端页面上可能没什么，但是一旦到了手机页面，那就有可能是“大坑”，下面是本人自己开发手机页面过程中总结的一些问题，避免以后再次去犯。 1.overflow-x 这真的是一个大坑，一旦你在body或者html上用了这个属
移动端页面踩坑合集
Doubleu_的博客
10-22 488
上周接的一个移动端的活动，那是一踩一个坑啊，在chrome和模拟器上调试没问题，但是你万万想不到，手机的型号怎么这么多，做好各设备的兼容将是各前端er的重要使命，且任重而道远。 一、自适应布局 在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1、layout viewport...
移动端常见问题之input
weixin_33711641的博客
11-15 155
2019独角兽企业重金招聘Python工程师标准>>> ...
解决IOS安卓虚拟键盘挡住input问题
菜得抠拇指
01-22 2192
在做微信移动端IM的时候 ios和安卓会遇到input被键盘挡住的问题挺影响用户体验的 解决思路使用scrollIntoView 方法:scrollIntoView()可以在所有的HTML元素上调用，通过滚动浏览器窗口或某个容器元素， 调用元素就可以出现在视窗中。如果给该方法传入true作为参数，或者不传入任何参数，那么 窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作
ios 键盘遮挡 html,页面底部input被弹出来的键盘遮挡(iOS系统)—附解决方案
weixin_28925169的博客
06-07 587
项目上要做一个留言回复的框.类似这种用一个div套在input外面, 点击按钮时, 这个div出现, 位于页面底部. 并且input获得焦点, 自动弹出系统键盘.但是, 在开发的时候发现,在iOS系统中这个div总是被键盘遮住, 曾经使用了垫高div框的办法, 天真的以为能够使它往上挪, 但是发现没有用, 需要手动往上拉才能出来.查了很久, 看网上很多人都死在了这个问题上.比较靠谱的答案在[知乎]...
positon:sticky侧边栏和positon:fixed header互相遮盖的问题
weixin_43870127的博客
10-29 781
final result
粘性定位——position: sticky
weixin_48796690的博客
10-09 358
粘性定位（不脱离文档流）——position: sticky
关于手机端IOS系统微信中虚拟键盘遮挡input输入框问题的解决方案
热门推荐
RotatingBlock的博客
03-26 4万+
手机端IOS系统微信中虚拟键盘遮挡input输入框问题解决方案

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值