iOS Mobile Safari 隱藏光標

发布于 2022-08-30 00:49:27 字数 441 浏览 14 评论 0

自己處理事件並繪製文本框，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 的情況。

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我一直都在从未离去 2022-09-06 00:49:27

问题解决了~
实测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上面自定义样式都可以
  }
}

回复收藏 0

゛清羽墨安 2022-09-06 00:49:27

問題已解決。

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，在某些情況會出現無法獲取光標位置的問題。

綜上：