解決 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 開發中心問題跟蹤）