H5 IOS input光标错位的问题

最新推荐文章于 2024-12-23 10:06:08 发布

原创最新推荐文章于 2024-12-23 10:06:08 发布 · 3.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#H5 #IOS

H5 专栏收录该内容

1 篇文章

订阅专栏

在iOS设备上，H5中的input元素经常会出现光标错位问题，这主要是因为iOS对position:fixed的支持不足。为解决此问题，建议避免在input表单的父元素中使用position:fixed，转而使用position:absolute。当输入框位于常驻屏幕中央的弹出窗口时，由于窗口需要固定定位，不能直接在弹窗内部使用absolute。一种解决方案是将文本内容放在一个高度全屏（height:100vh）的div中，然后放入另一个同样全屏并实现滚动的div内，确保弹窗元素与其同级。

通过百度和csdn博客发现，造成这个问题的原因是ios对position:fixed;支持度不够。所以，有用到input表单的地方，其parents尽量避免使用position:fixed，要想办法用position:absolute代替。

如果出现：页面内容比较长，input出现在弹出窗内。由于弹出窗需要始终定位在窗口中央，所以不能在弹窗直接使用absolute，所以给出如下解决方案：

将页面文本内容用一个

<div class="content"></div>

包起来，设置高度满屏（height：100vh）；然后再放入到

<div class="content_box"></div>

里，和弹窗元素同级，也设置高度满屏，超出部分滚动。。。详细看如下代码实例：

<div class="content_box">
    <div class="content">
        ...    
    </div>
    <div class="alert_wrap">
        ...
    </div>
</div>

<style>
    .content_box{
        height:100vh;
        position: realtive;
    }
    .content{
        height:100vh;
        overflow: scroll;
    }
    .alert_wrap{
        position: absolute;
        left:0;
        top:0;
        right:0;
        bottom:0;
        ...
    }
</style>