iOS vant Dialog 中的input光标错位

1,734 阅读1分钟

1.Dialog中的input光标错位

主要表现在微信内置浏览器。光标会下移,导致Dialog 的取消和确定按钮无法点击。

原因:

    .van-dialog {
        position: fixed;
    }

ios 10以上 fixed布局会产生如下bug -- 光标溢出问题。
fixed在ios上兼容不友好,会造成光标乱跳。

解决办法:

<style lang="less">
    /* 解决iOS input光标错位 */ 
    .van-dialog {
        position: absolute!important;
    }
</style>

覆盖vant的样式。
然后光标不错位了,取消确认按钮可正常点击。

2.参考文章

1.input 输入框 光标错位问题 、移动端输入框/input框光标错位问题、微信H5输入框/input框光标错位问题
2.ios系统input光标错位