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

最新推荐文章于 2023-08-29 10:57:51 发布

转载最新推荐文章于 2023-08-29 10:57:51 发布 · 485 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/Yirson/p/10892950.html

收录于

本文介绍了一种在输入框失去焦点时调整页面滚动位置的方法，通过简单的JavaScript代码实现，确保用户在进行输入操作后能立即看到输入框，提高用户体验。

在input框聚焦失焦的时候，都调用以下js即可

setScrollTop() {
            let scrollTop = document.body.scrollTop + document.documentElement.scrollTop
            window.scrollTo(0,scrollTop)
            
        },

转载于:https://www.cnblogs.com/Yirson/p/10892950.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

abm1314

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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

qq_37309987的博客

11-21

377

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

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

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

1234567~~

06-21

6747

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

当ios、input、fixed碰到一起时

weixin_34032827的博客

03-27

653

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

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

weixin_34270606的博客

06-27

748

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

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

鹿歪歪酱

07-25

787

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

H5 IOS input光标错位的问题

ws932734384的博客

05-15

3689

通过百度和csdn博客发现，造成这个问题的原因是ios对position:fixed;支持度不够。所以，有用到input表单的地方，其parents尽量避免使用position:fixed，要想办法用position:absolute代替。如果出现：页面内容比较长，input出现在弹出窗内。由于弹出窗需要始终定位在窗口中央，所以不能在弹窗直接使用absolute，所以给出如下解决方...

IOS11 safiri中position:fixed弹出框中的input出现光标错位的问题

chose_DoIt的博客

05-04

1136

IOS中position:fixed弹出框中的input出现光标错位的问题ios11发布后，测试人员反馈回来，键盘弹起时，input光标会定位不准。后来查了资料，原来是position：fixed，和input一起使用会出现的bug。应该来说，是fixed在移动端支持不怎么好。解决方案是弹出表单时,给body加一个高度var h=$(window).height(); $("body,html"...

IOS中position:fixed弹出框中的input出现光标错位的问题

12-01

353

ios11发布后，测试人员反馈回来，键盘弹起时，input光标会定位不准。后来查了资料，原来是position：fixed，和input一起使用会出现的bug。应该来说，是fixed在移动端支持不怎么好。解决方案是弹出表单时,给body加一个高度 var h=$(window).height(); $("body,html").css({"overflow":"hidd...

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

weixin_33924312的博客

02-21

408

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

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

为赋新辞。

06-27

1098

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

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

小芳的专栏

05-29

425

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

移动端底部fixed定位input输入框被软键盘遮挡解决办法

細水、長流√的专栏

08-29

2246

移动端底部fixed定位input输入框被软键盘遮挡解决办法，方法有三种，具体使用可以看应用后问题是否被解决。

position:fixed显示错位

hua_ban_yu的博客

09-27

1万+

在项目开发过程中遇到一个问题，使用layer显示弹出框时，弹出框里面的标签设置position:fixed显示位置是从弹出框位置进行定位，而非屏幕视口（viewport）的位置来定位。经过调查发现，原来layer弹出框使添加了layui-anim类，这样样式类中使用了transform进行动画的效果的设置。 position:fixed定位错误原因：当使用了position:fixed...

position：fixed固定定位失效问题（不是以可视窗口定位）

D浩DzD的博客

05-22

3139

在项目中遇到一个问题，明明使用的定位是fixed定位，应该按照元素相对于屏幕视口（viewport）的位置来指定元素位置，但是却发现而是以他的祖先盒子为参照的上图中的list-box下拉框虽然是固定定位但是以他的祖先盒子类名为content的弹窗为参照的，所以导致下拉框错位了，正常应该是如下图那是什么原因影响到他的呢，之前一直以为固定定位就一直是以可视区域为参照进行偏移的，其实不然，它还会受一些其他因素的影响 fixed ：元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口

css 搞定input框使用fixed下输入的问题

怪兽的猫的博客

04-16

1390

最近在做移动端H5聊天应用发现，当input框在最底部并且使用 position:fixed 属性的时候在苹果手机中会出现不兼容的情况项目体验大概布局就是上面是列表底部是input并基于浏览器定位放置于最底部当点击输入框的时候会出现input位置错乱的情况这里出现了上移的情况这里出现了消失的情况，得滑动到最底下才会出现在经过一系列的面向百度编程后，各种监听input是否聚焦在写相应的事件再去对input做一些位置上的定义，我感觉好麻烦，也非常繁琐，最后我实践出一个相对比较完美的方案并且只

踩坑路上——IOS Safari浏览器下固定定位position:fixed带来的问题与解决方案