最近公司新来的一个实习生在
开发系统时对于文本框的readonly属性和disabled属性两者之间有什么不同一直搞不太清楚,其实这两个东西如果不去深究,简单的使用的话大部分情况下两者还是可以通用的,不过如果对些系统细节要求比较高的情况,两者间的用法还是有不同的。
readonly只用于阻止用户修改表单元素的值,并不会在提交表单时阻止表单元素的提交。
disabled属性表示禁用该表单元素。被禁用的表单元素既不可用,也不可点击,不可接收焦点,也无法选中其中的文本内容。该属性对text、password、textarea、select、radio、checkbox、hidden、option等表单元素都有效。disabled属性不仅会阻止用户操作该元素,并且在提交表单时会阻止该表单元素的提交。例如:
<input name="test" type="text" disabled="disabled" value="hello"/>
由于该表单元素test具备disabled属性,在提交表单时,该表单元素不会跟随表单一起提交,因此我们在后台服务器接收到的请求中不会包含名称为test的参数。
属性名称 | 针对元素 | 只读 | 可获得焦点 | 跟随表单提交 |
---|---|---|---|---|
readonly | 仅text、password和textarea元素 | 是 | 是 | 是 |
disabled | 所有<input>、 <button>、 <select>、 <optgroup>、 <option>、 <textarea>标签 | 是 | 否 | 否 |
关于表单元素属性readonly和disabled的更多详情,可以参考W3C上的介绍内容:http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.12