readonly属性在各浏览器中的区别

Posted 2020-08-11 amy01

有个项目需求是正常显示时为只读，不可修改；

点击修改按钮后，可修改表单元素。

首先想到的是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);//不编辑

在各浏览器中测试样式均为：鼠标不可进入。用户体验更好些。