input標籤中設定readonly屬性後游標顯示問題
阿新 • • 發佈：2018-11-19
IE、火狐瀏覽器中，在HTML中,如果把一個的readonly屬性設定為"readonly",表示這個表單元素不能編輯。但是,滑鼠點選之後,這個表單元素還是有游標存在的。
以下方法可以解決這個問題：
1.設定屬性 disabled=“disabled”，
<input type="text" id="id" style="width:250px;height:30px;" disabled="disabled"/>
在這種情況下，表單中的元素不可以被編輯，而且谷歌，IE瀏覽器中input框中的文字可以被選取，但是火狐瀏覽器中input框中的文字不可以被選取。
2.設定屬性 unselectable=“on”，
<input type="text" id="id" style="width:250px;height:30px;" readonly="readonly" unselectable="on"/>
這種情況主要是解決IE瀏覽器中的光標出現問題。火狐瀏覽器中不支援。
3.onfocus=“this.blur()”
<body><input type="text" id="id" readonly="readonly" unselectable="on" onfocus="this.blur()"/></body> <script> $(document).on('focus', 'input[readonly]', function () { this.blur(); }); </script>
這種情況主要是解決火狐瀏覽器中的光標出現問題。此方法不僅會讓游標消失，而且使框中的資訊變得無法獲取。