有个项目需求是正常显示时为只读，不可修改；
点击修改按钮后，可修改表单元素。
首先想到的是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);//不编辑
在各浏览器中测试样式均为：鼠标不可进入。用户体验更好些。