disabled和readonly属性的区别是什么

在实际应用中，可能要设置表单元素为内容是不可更改的，标题中的两个属性都可以实现此功能。

代码如下:

<code>&lt;!DOCTYPE html&gt;</code>

<code>&lt;</code><code>html</code><code>&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>meta</code> <code>charset</code><code>=</code><code>" utf-8"</code><code>&gt;</code>

<code>&lt;</code><code>title</code><code>&gt;蚂蚁部落&lt;/</code><code>title</code><code>&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>disabled</code><code>value</code><code>=</code><code>"蚂蚁部落一"</code><code>/&gt;</code>

<code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>readonly</code><code>value</code><code>=</code><code>"蚂蚁部落一"</code><code>/&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

上面代码使用两个属性可以将文本框设置不可更改的状态，使用键盘和鼠标是不能修改文本框的内容。

两个属性的区别:

虽然两个属性功能上有相似之处，但是区别还是非常巨大的，下面就简单做一下列举。

1.两个属性在元素上的渲染效果不同，这个自然一目了然。

2.disabled是设置元素"不可用"，比较狠一点，相应元素的value属性值不能够通过表单提交，也不能够使用js代码去动态修改value属性值，readonly是设置元素为只读，可以通过表单提交相应的值，也可以使用js动态修改value属性值。

原文发布时间为：2017-2-20

本文作者：admin

本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落