解决 iOS 11 低版本输入框光标溢出问题

问题复现

测试反馈了一个问题

• 在使用内嵌 webview， iOS 的时候发现了密码的输入框的光标不在正确的位置，溢出到 input 框外面了。
• google 了一下问题，发现是 i 11 低版本的 safari 浏览器会出现的问题。
• hackernoon.com/how-to-fix-… （具体的问题连接）

怎么解决 Ios 光标溢出的问题？

解决方案一

• 使用全局的绝对布局

// css
 .body{
   @media screen and(max-width:450px){
        position: fixed;
        width: 100%;
    }
 }
复制代码

body 元素使用fixed 布局，width:100%

这里会出现移动端不能滑动的问题

• 这里升级一下代码解决一下这个问题, 设置 overflow

.body{
    @media screen and(max-width:450px) {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 100%;
        overflow-y: scroll;
        overflow-x: hidden;
    }
}
复制代码

密码输入框的设计，不须要光标直接隐藏

• 隐藏光标有几种方法
• 直接使用 caret-color

// css
.hide-cursor{
    caret-color: transparent; // ios safari 11.1 +支持
}
复制代码

因为 caret-color 只支持 iOS 11.1 +，咱们使用 text-indent来移动行内缩进量，给个足够大的值，形成隐藏光标的做用

.fix-ios-safari-11.1{
    text-indent: -9999px; // 隐藏光标
    margin-left: -50%;
}
复制代码

写在最后

• 好消息是最后再 iOS 11.3 之后的版本都解决了上诉问题
• Finally, as of iOS 11.3 this has been resolved 🎉

参考

• medium.com/hackernoon/…
• segmentfault.com/q/101000000… (直接隐藏光标解决)
• forums.developer.apple.com/thread/9772… （apple 开发中心问题跟踪）