iOS Mobile Safari 隱藏光標

自己處理事件並繪製文本框，iOS 因無法操作鍵盤只能藉助 input 元素。

然而：
1. 若 input 完全不顯示，則無法獲得焦點；
2. 即便是隱藏，光標依舊可見；
3. 移出文檔區域會導致事件響應十分緩慢，iOS8 Safari 無此 bug，但 UIWebView 問題依舊；
4. 保留在文檔區域內但不在可視範圍內會自動滾動頁面且無法屏蔽，setTimeout 嘗試恢復會閃爍；
5. 縮小文本框尺寸到 0 會隱藏光標，但同時無法獲知光標位置（不爲 0 但很小則可以），且對 iOS8 Safari 無效；

貌似 iOS7 與 iOS8 的 UIWebView 表現類似，但是版本號不同；iOS8 Safari 與前兩者不同但版本號與 iOS8 UIWebView 相同。

感覺只能針對特定版本來實現，但更新會影響版本號，沒辦法全部測試。不知道 iOS6 的情況。

問題已解決。

https://bumfo.github.io/l.html

核心代碼：

<!DOCTYPE HTML>
<title>Hide</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<style>
input {
    width: 0;
    height: 0;
    border: 1px solid red;
    font-size: 1px;
    text-indent: -20px;
    opacity: 0;
}
</style>

<input id="q">
<label for="q">Input</label>

<script>
var l = document.querySelector("label");
document.querySelector("input").addEventListener("input", function(e) {
    l.textContent = e.target.value || "Input";
});
</script>

原理分析：

iOS8 的 Safari 支持在 input 外面顯示光標，因此之前修改 input 尺寸的方法無效；
iOS7 不支持在 input 外面顯示光標，某些情況下，光標位於視圖外會導致響應極其緩慢，但這時修改 input 尺寸的方法有效。
另外，若 input 尺寸（包括 border）有一項爲 0，在某些情況會出現無法獲取光標位置的問題。

綜上：

需要讓 iOS8 的光標顯示在視圖外且 iOS7 的光標顯示在視圖內。
需要將 input 尺寸調至 0，以隱藏 iOS7 的光標，並避免總尺寸爲 0。
需要隱藏文字。

解決方案：

用 text-indent 將光標移至視圖外，iOS7 由於不支持，會將光標保持在原地，正好滿足需求。
設置寬高屬性，設置邊框屬性。
設置 opacity 爲 0。

问题解决了~
实测8.1.1和7.1.2，
特性：

input可以换起键盘
input光标隐藏
input内容隐藏
通过其他DIV或Label模拟input样式

.input-container{
  width: 100%; //或者input容器宽度

  input{
    text-indent: -999em; // 隐藏input文字
    margin-left: -100%;// 隐藏input光标
    width: 200%; // 保留inputDOM在页面可视区域内
  }

  label{
    // 这里面自定义样式，或者你在任意的dom上面自定义样式都可以
  }
}

【热门文章】