IOS中移动开发input弹出输入法后position:fixed;失效的问题解决

最新推荐文章于 2023-11-21 16:27:49 发布

weixin_34270606

最新推荐文章于 2023-11-21 16:27:49 发布

阅读量645

点赞数

文章标签：移动开发 javascript python ViewUI

原文链接：https://my.oschina.net/u/3237686/blog/1836560

版权

2019独角兽企业重金招聘Python工程师标准>>>

在ios的浏览器中如果页面存在fixed定位的元素(一般是header和footer),在点击input唤醒输入框时会把这个元素的布局弄乱,总之就是不正常了,这让移动端前端开发人员非常郁闷.网上有很多解决办法,感觉都比较复杂.

使用了一个简单的办法,适用于一些情景:

点击input时focus事件触发,将fixed布局的元素改为absolute,使元素不再浮在屏幕上;失去焦点时blur事件触发,再改为fixed布局,还原即可.

转载于:https://my.oschina.net/u/3237686/blog/1836560

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34270606

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IOS中移动开发input弹出输入法后position:fixed;失效的问题解决

2019独角兽企业重金招聘Python工程师标准>>> ...
复制链接

扫一扫

Qt开发经验总结

草上爬的博客

12-02

8017

增加了很多轮子，同时原有模块拆分的也更细致，估计为了方便拓展个管理。把一些过度封装的东西移除了（比如同样的功能有多个函数），保证了只有一个函数执行该功能。把一些Qt5中兼容Qt4的方法废弃了，必须用Qt5中对应的新的函数。跟随时代脚步，增加了不少新特性以满足日益增长的客户需求。对某些模块和类型及处理进行了革命性的重写，运行效率提高不少。有参数类型的变化，比如 long * 到 qintptr * 等，更加适应后续的拓展以及同时对32 64位不同系统的兼容。

IOS下软键盘弹出时，H5页面上方的固定区域被顶上去的解决办法(js)

soband_xiang的专栏

03-26

4594

键盘弹出后，整个页面上移，原先固定在顶部，position=fixed的div，不见了。原来这时候div的fixed的效果变成了absolute效果。键盘弹出时，会触发body的scroll事件。这时候只要得到页面整体滚动的距离，把div的top设置为这个距离就可以了 $(window).on('scroll', function () { //在IOS下document.body.scrollT...

参与评论您还未登录，请先登录后发表或查看评论

ios 弹起软键盘position: fixed；失效

weixin_47490704的博客

11-19

2061

<view class="stores-top"> <input type="text" placeholder-class="placeholder" v-model="shop" placeholder="店舗名または住所を入力してください" /> </view> .stores-top { width: 100%; height: 88upx; position: fixed; ...

解决：ios下弹框fixed定位，input点击失效

鹿歪歪酱

07-25

687

页面结构： <body> <div> <p>......</p> <p>......</p> <p>......</p> </div>  <div class="loginBox"> <div cl...

ios下输入框input进行fixed定位 bug

1234567~~

06-21

6606

在做移动端开发时，经常会遇到，弹窗框内有input输入框，这可以说与ios相爱相杀了。一个很让人头疼的问题，就是ios下面的input输入框fixed定位。 1、先来看代码结构 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> &lt

IOS 表单含有input框和有position: fixed导致错位的问题

abm1314的博客

05-20

389

在input框聚焦失焦的时候，都调用以下js即可 setScrollTop() { let scrollTop = document.body.scrollTop + document.documentElement.scrollTop window.scrollTo(0,scrollTop) ...

h5底部输入框被键盘遮挡_微信 H5 页面兼容性解决方案

weixin_39528029的博客

10-25

1016

最近给公司微信公众号，写了微信h5业务页面，总结分享一下前端开发过程中的几个兼容性坑，项目直接拿的公司页面，所以下文涉及图片都模糊处理了。1、ios端兼容input光标高度问题详情描述：input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上当点击输入的时候，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是ios的input光标。出现原因分析：通常我们...

js手机键盘遮挡_移动端页面input输入框被键盘遮挡问题

weixin_33773996的博客

12-30

1383

提交vheader, footer, main {display: block;}header {position: fixed;height: 50px;left:;right:;top:;}footer {position: fixed;height: 34px;left:;right:;bottom:;}main {margin-top: 50px;margin-bottom: 34px;h...

移动端开发遇到的问题及解决方式

ygkyufcl的博客

03-03

1032

1.解决页面使用overflow: scroll在iOS上滑动卡顿的问题? 首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题。解决方案是： (1) 看是否能把body和html的height: 100%去除掉。 (2) 在滚动的容器中增加：-webkit-overflow-scrolling: touch或者给body增加：body...

h5 iframe嵌套页面_汇总IOS下奇葩BUG以及iframe嵌套页面带来的一些困扰

weixin_39647499的博客

12-19

1777

做H5开发，安卓和IOS的兼容问题经常会困扰我们，尤其是跟第三方平台合作，用到iframe嵌入式应用，令很多Web前端开发的童鞋脑壳疼，相信大家也入了不少坑，且踩且珍惜吧，呵呵^_^。今天抽时间整理一些出来，希望能帮助到大家。iframe自动变宽了，在IOS手机上出现滚动条第一步：定义 iframe 中的scrolling属性为no，设置iframe中不显示滚动条。第二步：设置iframe的样式为...

h5 input 失去焦点时，页面fixed定位ios兼容性问题

最新发布

qq_37309987的博客

11-21

155

问题描述：移动端input框失去焦点时，ios端页面被键盘顶到上面后未回到正常位置。2、input失去焦点时将最外层容器通过scrollIntoView滚动到正常位置。1、将页面中fixed布局改为absolute定位；

ios 11系统fixed布局下input光标问题

为赋新辞。

06-27

952

ios 11系统fixed布局下input光标问题问题描述系统：ios 11 页面布局：fixed定位的弹窗，弹窗上有input输入框 现象：input元素获取焦点时光标正常，点击键盘输入之后光标会出现错位（掉下去了）引起原因：弹框的定位采取position：fixed，而ios（safari）对定位属性position：fixed的解析不一致导致。解决方案弹窗...

当ios、input、fixed碰到一起时

weixin_34032827的博客

03-27

597

最近在做H5的项目，弹出框里有input，测试在测兼容时候发现，input光标下移，偏移位置。只有 ios11 系统会出现这种情况。然后github一下发现是 ios11 系统版本带来的 Bug，原因就是：弹框的定位采取position：fixed，而 ios（safari）对定位属性position：fixed的解析不一致导致。所以我想到的解决方法就是：把fixed用absolut...

web移动端Fixed在Input获取焦点时ios下产生的BUG及处理

weixin_33924312的博客

02-21

327

1.现象可以看到下面两张图，图1搜索框为fixed固定在顶部，滚动没有任何问题。图2当光标进入搜索框时，ios自作聪明的把光标定位到中间，并且fixed属性被自动修改成了absolute。此时注意滚动页面的话，会发现原本fixed的搜索框跟着文档一起滚动了。再仔细观察ios下的一些特点，ios为了让input垂直居中，甚至还滚动了滚动条，原本看不到的上半段产品的内容也漏出来了。 ...

兼容性ios、安卓值input 以及fixed

小芳的专栏

05-29

294

1.好久没解决兼容性的问题了。研究了ios系统的上滑机制和安卓的上滑机制他是不一样的； ios：是可视窗口向上顶上去了。安卓：是可视窗口缩小了。 fixed定位

苹果14键盘遮挡fixed定位的输入框等元素

前端看世界

10-27

609

ios系统苹果14手机当键盘弹起时会遮挡住fixed定位元素

h5输入框调起ios端键盘fixed失效

dafugagaga的博客

09-28

2006

h5页面在ios端webview中输入框异常。input框fixed在页面底部，ios端如果是手机自带输入法，输入框第一次获得焦点时会出现在键盘上部之后立马被隐藏，再获得焦点时则正常贴在键盘上部，但是如果是第三方输入法（这里我遇到的是搜狗输入法），输入框就完全被隐藏，换成absolute定位也不行，完美方案： .footer{ position: absolute; left: 0;

关于position:fixed在ios上通用的解决方法

05-02

596

最近在项目中总是遇到一些奇奇怪怪的css样式问题，在网上找了一大堆方法都没什么用，最后仔细思考了之后发现，并不是没用，而是适应条件不一样，话不多说直接进入主题。假如你的项目需要滚动的地方上一层有很多个div包着，并且也有position:fixed的div包着还有一堆烂七八糟的css样式，这时你想滚动的那个页面本来是有顶部固定或者是底部固定，到后面都会随着页面一起滚动，在io...

ios 16.3 以上系统 position:fixed,position:sticky 会跟随滚动，怎么解决

06-02

在 iOS 16.3 及以上系统中，`position:fixed` 和 `position:sticky` 会跟随滚动。这是由于 iOS 13 引入了新的滚动机制，称为“弹性滚动”（Bouncy Scrolling），导致这些元素无法像之前一样工作。要解决这个问题，...