表單中readonly的input等標簽，禁止光標進入（focus）的幾種方式

Lowky 發布于2019-08-30 15:53 / 3594人閱讀

摘要：需求及問題描述在做移動端頁面，需要在訂單頁面中顯示表單數據，由于統一，所以就依舊采用的結構來寫結構，只讀數據的標簽自然要加，以為這樣就行了。測試中模擬移動端是看不出問題的。除此之外都表現完美，就我目前需求來看，也不需要什么事件。

需求及問題描述

在做移動端頁面，需要在訂單頁面中顯示表單數據，由于UI統一，所以就依舊采用form的結構來寫結構，只讀數據的標簽自然要加readonly=”readonly”，以為這樣就行了。
測試中Chrome模擬移動端是看不出問題的。然而iOS手機上一看，雖然表單元素不能編輯內容，但是會出現閃動的光標以及頁面底部有一條系統自帶的控制bar（安卓的沒有測試，我猜想也有問題吧？）。如下圖：

這種情況對我來說并不好。于是網上找了一些解決方案，現在總結如下：

方案一（JS）：

這個很好理解就是進入的時候自動跳出。但是缺點是一方面js處理沒有css好，二是如果需要在該元素上綁定其他事件，其他人開發不留意可能會造成事件覆蓋。

方案二（CSS）：

[readonly="readonly"] {
  user-select: none;
}

這是個新的實驗性屬性，具體說明及兼容性可參考user-select MDN
用起來感覺很好，但是同樣有兩個問題：一，非標準屬性（請盡量不要在生產環境中使用它！）；二，如果用戶想要復制該表單內容就不行了，這個問題個人感覺很嚴重！

方案三（CSS）：

[readonly="readonly"] {
  pointer-events: none;
}

這個是我感覺比較適合我的，因此最后我采納了該方案，當然也是有弊端的，綁定在只讀表單元素的所有事件將無法生效。除此之外都表現完美，就我目前需求來看，也不需要什么事件。因此采用了~

當然，如果你也遇到相似的問題，可以根據情況選擇對應的方案，當然，如果你也有更好的方法也歡迎留言~

云服務器 GPU云服務器 js繼承的幾種方式服務器請求的幾種方式 java創建對象的幾種方式最基本的幾種

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116643.html

你不知道的CSS（三）

摘要：本文首發于我的博客在前面兩篇文章你不知道的一和你不知道的二中大致介紹了一些方面比較隱晦的但又很實用的技巧。系列文章你不知道的一你不知道的二本文首發于我的博客本文首發于我的博客在前面兩篇文章《你不知道的CSS（一）》和《你不知道的CSS（二）》中大致介紹了一些CSS方面比較隱晦的但又很實用的技巧。相信這些技巧會為大家在項目實踐中帶來一定的幫助，本文作為《你不知道的CSS》系列的第三篇...

xiangzhihong 2019-08-29 13:28 評論0 收藏0
原生JS實現粘貼到剪貼板

摘要：綜上加兩行如果不是等表單元素，不能使用和的話，那么我們可以使用和方法來模擬這個過程了，對象表示用戶選擇的文本范圍或光標的當前位置，滿足執行命令的可編輯活動區域，如下上述針對非，等表單元素也能實現了本文主要討論原生方法目前常見的實現粘貼到剪貼板主要有以下兩種方法：第三方庫 clipboard 原生JS, 主要是 document.execCommand方法第一種方法按照文檔...

Pikachu 2019-08-22 15:06 評論0 收藏0
css選擇器總結

摘要：偽類選擇器之動態偽類序號選擇器名稱說明版本動態偽類選擇器未被訪問時動態偽類選擇器已被訪問時動態偽類選擇器鼠標以上時動態偽類選擇器訪問中跳轉頁面時動態偽類選擇器獲得焦點時是有順序的，其他順序可能無效，這是個坑。 1. 基本選擇器序號選擇器名稱說明 css版本 1 * 通用選擇器選擇所有元素，包括html和body 2 2 div,span 標簽選擇器根據標簽選擇...

DirtyMind 2019-08-30 15:52 評論0 收藏0
構建一個自定義 angular2 輸入組件

摘要：構建一個自定義輸入組件今天我們來學習如何正確的構建和一個具有和同樣作用，但同時也具有自己的邏輯的輸入組件。值訪問器在完成上面的一些步驟之后，我們的組件基本功能完成了，但是接下來還有最重要的一部分內容，那就是讓我們的自定義組件獲得值訪問權限。構建一個自定義 angular2 輸入組件今天我們來學習如何正確的構建和一個具有和同樣作用，但同時也具有自己的邏輯的輸入組件。在讀這篇文章...

CNZPH 2019-08-02 15:56 評論0 收藏0
構建一個自定義 angular2 輸入組件

摘要：構建一個自定義輸入組件今天我們來學習如何正確的構建和一個具有和同樣作用，但同時也具有自己的邏輯的輸入組件。值訪問器在完成上面的一些步驟之后，我們的組件基本功能完成了，但是接下來還有最重要的一部分內容，那就是讓我們的自定義組件獲得值訪問權限。構建一個自定義 angular2 輸入組件今天我們來學習如何正確的構建和一個具有和同樣作用，但同時也具有自己的邏輯的輸入組件。在讀這篇文章...

pekonchan 2019-08-20 12:32 評論0 收藏0