简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - iOS Mobile Safari 隱藏光標
伊谢尔伦
伊谢尔伦 2017-04-10 14:45:19
0
2
793

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

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

reply all(2)
巴扎黑
巴扎黑2017-04-10 14:47:19 2 floor

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

  • input可以换起键盘
  • input光标隐藏
  • input内容隐藏
  • 通过其他p或Label模拟input样式
.input-container{
  width: 100%; //或者input容器宽度

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

  label{
    // 这里面自定义样式，或者你在任意的dom上面自定义样式都可以
  }
}
Like +0
Add Reply
小葫芦
小葫芦2017-04-10 14:47:19 1 floor

問題已解決。


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

綜上：

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

解決方案：

  1. 用 text-indent 將光標移至視圖外，iOS7 由於不支持，會將光標保持在原地，正好滿足需求。
  2. 設置寬高屬性，設置邊框屬性。
  3. 設置 opacity 爲 0。
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！