ホームページ  >  に質問  >  本文

javascript - 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 的情況。

伊谢尔伦伊谢尔伦2773日前800

全員に返信(2)返信します

  • 巴扎黑

    巴扎黑2017-04-10 14:47:19

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

    返事
    0
  • 高洛峰

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

    綜上:

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

    解決方案:

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

    返事
    0
  • キャンセル返事