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 的情況。
前端 input textinput ios JavaScript
东风谷￡早苗
10 years, 2 months ago
Answers
问题解决了~
实测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上面自定义样式都可以
}
}
LilMic
answered 10 years, 1 month ago
問題已解決。
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。
Juuyonn
answered 10 years, 1 month ago