拒绝鸡肋：最全Js只读readOnly与禁用disabled一网打尽！

前端

2023-10-28 10:53:10

只读 (ReadOnly) 与禁用 (Disabled)：前端开发中的孪生兄弟

何谓 ReadOnly 与 Disabled？

在 JavaScript 的前端开发中，readOnly 和 disabled 属性经常被混淆，因为它们似乎具有相似的效果。然而，这两种属性在概念上存在着微妙的差别。

ReadOnly： 只读属性允许用户查看元素的内容，但无法进行任何修改。这在展示重要信息、防止意外编辑或收集反馈等场景下很有用。
Disabled： 禁用属性不仅阻止用户输入内容，还禁止他们与元素进行任何交互。这意味着禁用后的元素就像不存在一样，无法点击、选择或进行其他操作。

ReadOnly 与 Disabled 的本质区别

虽然 readOnly 和 disabled 属性在表面上看起来相似，但它们的核心区别在于：

readOnly 只限制输入，而 disabled 完全禁止交互。
readOnly 适用于需要展示重要信息或防止误操作的场景，而 disabled 适用于表单验证、防止重复提交或控制页面流程的场景。

统一原理

尽管 readOnly 和 disabled 属性有不同的应用场景和重点，但它们背后的原理却惊人地相似。这两种属性都是通过修改元素的属性来实现其效果：

readOnly 通过将元素的 readOnly 属性设置为 true 来启用只读模式。
disabled 通过将元素的 disabled 属性设置为 true 来启用禁用模式。

因此，只要你理解了其中一个属性的原理，理解另一个属性也就轻而易举了。

实战演练

以下是 readOnly 和 disabled 属性的代码示例：

<input type="text" id="readOnlyInput" readonly>
<input type="text" id="disabledInput" disabled>

// 获取元素
const readOnlyInput = document.getElementById("readOnlyInput");
const disabledInput = document.getElementById("disabledInput");

// 设置 readOnly 属性
readOnlyInput.readOnly = true;

// 设置 disabled 属性
disabledInput.disabled = true;