有個項目需求是正常顯示時為只讀，不可修改；
點擊修改按鈕后，可修改表單元素。
首先想到的是readonly屬性，其用於規定輸入字段為只讀，不能修改。在javascript中消除readonly值，可將輸入字段切換為可編輯狀態。如下面的寫法
<input type="text" name="email" readonly="readonly">
寫完后在瀏覽器中測試時發現如下：
IE瀏覽器：可以獲得焦點，光標可進入，但不能輸入。獲得焦點時按下Backpace鍵，頁面會后退跳轉。
Firefox瀏覽器：可獲得焦點，光標可進入，但不能輸入。獲得焦點時按下Backpace鍵，不起任何作用。
Chrome瀏覽器：可以獲得焦點，光標不可進入。
考慮到上面的差異，最后放棄了readonly屬性，采用disable屬性方法。注意只要有disabled關鍵字即有效，可以不賦值，甚至賦值為空或false都表示disabled有效。
<input type="text" name="email" disabled="disabled">
在css中增加如下樣式
input[disabled]{ pointer-events: none; cursor: not-allowed; }
若要切換input的可編輯狀態，在javascript中寫如下代碼。注意用的attr()方法，不是prop()方法。
$('input').attr("disabled", false);//可編輯
$('input').attr("disabled", true);//不編輯
在各瀏覽器中測試樣式均為：鼠標不可進入。用戶體驗更好些。