前端基础之disabled和readonly

说到表单元素的readonly和disabled属性，大家应该不会感觉到陌生吧，毕竟在日常的前端开发中，经常会遇到禁止用户更改表单中值的场景。但是如果你能一看到这个标题，脑海中就浮现出这两个属性的差异，那么恭喜你，你已经掌握了这两个概念没必要继续往下看了。但是如果你和我一样对这两个概念比较模糊的话，那么请继续往下看。

disabled

来自MDN的文档是这么描述disabled属性的：

This Boolean attribute indicates that the form control is not available for interaction. In particular, the click event will not be dispatched on disabled controls. Also, a disabled control's value isn't submitted with the form.

现代浏览器都支持disabled属性，BUTTON, INPUT, OPTGROUP, OPTION, SELECT, 和TEXTAREA（IE下，其他非form元素也支持这个属性）都支持这个属性。应用到这个属性的表单元素将有以下行为：

1. 无法获得输入焦点
2. 不能触发onclick事件;
3. 使用tab键切换焦点时会跳过此类元素;
4. 用户在页面上无法更改该元素的值，但可以通过脚本更改其值;
5. 提交表单时会忽略该元素的值;

W3C的文档中还提到,disabled属性的值可以是继承而来,元素上disabled属性会覆盖继承来的值。但在IE和Chorme下，对此的表现完全不同。

 <form disabled>
    姓名: <input type="text" name="name" value="柯南"><br/> 
    性别: <input type="radio" name="gender"  checked value="M">男
          <input type="radio" name="gender" value="F">女<br/>
    爱好：<select name="hobby">
            <option value="ball1">篮球</option>
            <option value="ball2">足球</option>
         </select><br/>
        <button type="submit">提交</button>
 </form>

在上面的栗子中，我们给form元素添加了disabled属性,标准实现的浏览器会直接忽略这个属性。然而在IE下面，其行为则非常诡异。

在IE（8,9,10,11）中,表单中的元素继承了form的disabled属性（但和标准的disabled属性行为有所不同）。所有的表单元素都呈现出禁用时的样式，但input可以获得焦点，并且用户在页面可以更改其值;button也可以点击。至于tab切换焦点，由于给form设置了disabled，所以tab切换时会忽略整个form。

readonly

When set for a form control, this boolean attribute prohibits changes to the control.

readonly则容易理解的多，从字面意思可以知道使用了该属性的元素的值是只读的。只有input(‘输入系’的input才生效，radio和CheckBox等不会生效)和textarea支持该属性。

相比disable属性的元素而言，readonly属性的元素可以接收焦点，而且tab切换焦点时不会忽略此元素，提交表单时也会将其提交。

IE和chorme对待readonly属性的元素有点差异。在IE中，readonly的input输入框中会出现可以移动的光标，在chorme下则不会出现光标。

总结

readonly 和 disable 都可以禁止用户在页面上更改form表单的内容,但都可以通过脚本更改其值。这两个属性各有各的用途，例如在一个编辑产品的form中,我们需要将产品ID展示出来，但不允许用户更改其值，这个时候我们就可以将ID这个表单元素设为readonly，因为我们还需要将ID对应的值传递给后台。大家都应该做过这样的事情，考虑到网络情况较差的情况下，在用户提交表单后，将提交按钮置为disabled,避免用户多次提交表单。上面两种情况只是readonly和disabled的常用用法。在开发中要视情况而定用哪个属性。

若有不足之处，请指出。

扫码关注w3ctech微信公众号