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

最新推荐文章于 2022-10-09 15:16:30 发布
原创 最新推荐文章于 2022-10-09 15:16:30 发布 · 7k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #兼容 #输入法 #前端 #ios

本文介绍了在移动端iOS下遇到输入法遮挡input的兼容性问题，并探讨了几种解决办法，包括onresize事件、定时器方案、布局重构和手动计算。作者采用手动计算的方法，通过监听键盘弹出并调整input位置，但存在延迟问题。建议在项目中避免过度依赖框架，优先考虑布局的灵活性，推荐使用Flex布局以减少兼容性问题。

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

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

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


遮挡

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


遮挡2

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

最低0.47元/天 解锁文章
uniapp [移动端H5网页] - 强力解决弹起软键盘后页面被挤压变形或页面整体上移问题，点击input输入框键盘弹出底部被上推往上顶遮挡及各种问题（兼容安卓苹果ios手机，微信公众号网页也适用）
🏆 前端领域优质创作者
06-22 1万+
uni-app，h5网页，input输入框组件，uniapp h5软键盘弹出，uni-app 输入框，键盘弹起时页面整体上移问题，uni，H5页面，解决软键盘弹起页面被挤压、被往顶的问题，解决uni-app 输入框，键盘弹起时页面整体上移问题，uniapp调用手机系统软键盘，页面窗口被顶起，布局定位失效，解决uniapp软键盘弹起导致页面fixed定位元素被顶上去，输入法软键盘弹起，窗口顶起，变形解决办法，UniApp中input组件在IOS设备上弹出软键盘时页面整体上移问题的解决方案，以及input组件聚
uniapp 完美解决苹果和安卓 input 框遮挡兼容问题
颜良文丑的博客
04-18 4821
小程序项目用到IM即时通讯功能，苹果和安卓出现input输入框被软键盘遮挡的情况。
IOS 键盘挡住输入框的问题解决办法
08-30
主要介绍了IOS 键盘挡住输入框的问题解决办法的相关资料,需要的朋友可以参考下
ios-键盘遮挡输入框处理.zip
07-11
键盘遮挡输入框处理
IOS 解决输入框被键盘遮挡问题
06-15
当键盘高度高于输入框的时候，界面向上拉 从而解决输入框遮挡问题
ios端 input输入框遮挡问题解决
asdfgh0077的博客
07-10 439
ios端 input输入框遮挡问题解决
移动端的坑（一）
qq_36800701的博客
06-19 275
一般，我们想要禁止橡皮筋效果的话，会给document加阻止默认行为，不过新版的谷歌浏览器不已经不让这么做了，所以现在一般都是在最外层的加个div，然后给它做阻止默认行为，但是阻止了默认行为会带来以下问题阻止默认事件带来的问题： 1)解决IOS10+ safari 以及部分安卓浏览器 不在支持 viewport的最大缩放值和禁止缩放的问题 2)解决IOS10+ safari下给body加overf...
解决移动端 ios 系统键盘遮挡的问题
01-20
在移动应用开发中，尤其是针对iOS系统的应用，经常会遇到一个问题：当用户在输入框（Input）中输入时，弹出的虚拟键盘会遮挡住输入框，导致用户体验下降。本文将详细探讨这个问题及其解决方案。 首先，我们需要理解...
uniapp u-input自动聚集并打开输入法
最新发布
10-15
当输入框聚焦时，移动端设备（如iOS或Android）会自动弹出输入法键盘。引用[1]提到`autofocus`属性可以直接实现初始化聚焦[^1]，但实际开发中常遇到视图层同步问题（如重复设置相同值不触发更新），引用[3]提供了一...
修复苹果iOS 原生键盘遮挡input框
weixin_33968104的博客
05-22 531
最近在做一个仿微信的聊天界面，有一个固定在页面底部的input框，本来使用fixed定位在底部，在android手机上没有任何问题，但在iOS上当点击输入内容的时候会出现不同情况的原生键盘遮挡输入框的情况。度娘出了很多解决方法，但没有一个方法可以完美解决，而且发现很多人都有这个问题，自己就苦思冥想出了一个相对不错的解决方法，跟大家分享一下。 先跟大家列举一下网上的解决方法，还有我的实践结果 po...
解决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 6293
现在的前端开发者基本都要同时着手PC端页面和手机页面的开发工作，就目前的状况来看，手机页面的兼容性要比PC端更为复杂（当然主要是只在android端，大家懂的），而且有些样式在PC端页面上可能没什么，但是一旦到了手机页面，那就有可能是“大坑”，下面是本人自己开发手机页面过程中总结的一些问题，避免以后再次去犯。 1.overflow-x 这真的是一个大坑，一旦你在body或者html上用了这个属
移动端页面踩坑合集
Doubleu_的博客
10-22 635
上周接的一个移动端的活动，那是一踩一个坑啊，在chrome和模拟器上调试没问题，但是你万万想不到，手机的型号怎么这么多，做好各设备的兼容将是各前端er的重要使命，且任重而道远。 一、自适应布局 在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1、layout viewport...
移动端常见问题之input
weixin_33711641的博客
11-15 212
2019独角兽企业重金招聘Python工程师标准>>> ...
解决IOS安卓虚拟键盘挡住input问题
菜得抠拇指
01-22 2305
在做微信移动端IM的时候 ios和安卓会遇到input被键盘挡住的问题挺影响用户体验的 解决思路使用scrollIntoView 方法:scrollIntoView()可以在所有的HTML元素上调用，通过滚动浏览器窗口或某个容器元素， 调用元素就可以出现在视窗中。如果给该方法传入true作为参数，或者不传入任何参数，那么 窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作
ios 键盘遮挡 html,页面底部input被弹出来的键盘遮挡(iOS系统)—附解决方案
weixin_28925169的博客
06-07 715
项目上要做一个留言回复的框.类似这种用一个div套在input外面, 点击按钮时, 这个div出现, 位于页面底部. 并且input获得焦点, 自动弹出系统键盘.但是, 在开发的时候发现,在iOS系统中这个div总是被键盘遮住, 曾经使用了垫高div框的办法, 天真的以为能够使它往上挪, 但是发现没有用, 需要手动往上拉才能出来.查了很久, 看网上很多人都死在了这个问题上.比较靠谱的答案在[知乎]...
positon:sticky侧边栏和positon:fixed header互相遮盖的问题
weixin_43870127的博客
10-29 862
final result
粘性定位——position: sticky
weixin_48796690的博客
10-09 514
粘性定位（不脱离文档流）——position: sticky
粘性布局sticky下的fixed显示被遮挡问题
快乐分享
08-05 1994
避坑！粘性布局sticky下的fixed显示被遮挡
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值