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

需求及問題描述

在作移動端頁面，須要在訂單頁面中顯示錶單數據，因爲UI統一，因此就依舊採用form的結構來寫結構，只讀數據的標籤天然要加readonly=」readonly」，覺得這樣就好了。
測試中Chrome模擬移動端是看不出問題的。然而iOS手機上一看，雖然表單元素不能編輯內容，可是會出現閃動的光標以及頁面底部有一條系統自帶的控制bar（安卓的沒有測試，我猜測也有問題吧？）。以下圖：

這種狀況對我來講並很差。因而網上找了一些解決方案，如今總結以下：

方案一（JS）：

<input type="text" value="test" onfocus="this.blur()" readonly="readonly">

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

方案二（CSS）：

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

這是個新的實驗性屬性，具體說明及兼容性可參考user-select MDN
用起來感受很好，可是一樣有兩個問題：一，非標準屬性（請儘可能不要在生產環境中使用它！）；二，若是用戶想要複製該表單內容就不行了，這個問題我的感受很嚴重！

方案三（CSS）：

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

這個是我感受比較適合個人，所以最後我採納了該方案，固然也是有弊端的，綁定在只讀表單元素的全部事件將沒法生效。除此以外都表現完美，就我目前需求來看，也不須要什麼事件。所以採用了~

固然，若是你也遇到類似的問題，能夠根據狀況選擇對應的方案，固然，若是你也有更好的方法也歡迎留言~