自己處理事件並繪製文本框,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 的情況。
巴扎黑2017-04-10 14:47:19
问题解决了~
实测8.1.1和7.1.2,
特性:
.input-container{
width: 100%; //或者input容器宽度
input{
text-indent: -999em; // 隐藏input文字
margin-left: -100%;// 隐藏input光标
width: 200%; // 保留inputDOM在页面可视区域内
}
label{
// 这里面自定义样式,或者你在任意的dom上面自定义样式都可以
}
}
高洛峰2017-04-10 14:47:19
問題已解決。
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,在某些情況會出現無法獲取光標位置的問題。
綜上:
解決方案: