w3ctech

前端基础之disabled和readonly

前端基础之disabled和readonly


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

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下给form加disabled属性

在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下则不会出现光标。

总结

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

若有不足之处,请指出。

w3ctech微信

扫码关注w3ctech微信公众号

共收到0条回复

只有w3ctech成员才能发表和回复。
登录 或者 注册 后发表或回复!