前端表单中 readOnly 和 disabled 属性的区别

定义与适用范围

• readOnly 是一种属性，仅适用于 <input> 和 <textarea> 元素。当设置了此属性时，用户无法修改这些元素的内容，但仍能聚焦并选中文本。
• disabled 则是一个更广泛的属性，可以应用于所有的表单控件（如 <input>, <textarea>, <button>, <select> 等）。一旦设置为 disabled，该元素不仅变得不可编辑，还完全失去交互能力，包括获取焦点和触发事件的能力。

功能差异

• 可操作性

  • 使用 readOnly 的表单元素依然能够被激活（获得键盘输入焦点），这意味着可以通过鼠标点击或 Tab 键导航到这个字段，并复制其中的数据。
  • 而标记为 disabled 的组件则彻底失效，既不能接受任何形式的用户输入，也无法响应诸如点击之类的动作。

• 表单提交行为

  • 如果一个表单项具有 readOnly 属性，在表单提交过程中会正常传递其值给服务器处理。
  • 相反地，如果某项设定了 disabled ，那么即使存在默认值或者其他预填充的信息，也不会随同其他有效的表单数据一同发送出去。

外观表现

尽管两者都能阻止用户的直接改动，但在视觉呈现方面可能存在细微差别：

• 浏览器可能会自动调整样式以反映状态变化——比如灰色化已禁用区域或将只读域保持原样以便区分它们的功能角色；
  然而具体效果取决于实际使用的浏览器以及开发者定义CSS规则的影响程度。

以下是简单的HTML代码示例展示了这两种情况下的基本用法：

<form action="/example">
    <!-- ReadOnly Input -->
    <label for="username">Username:</label>
    <input id="username" name="username" type="text" value="JohnDoe" readonly>

    <!-- Disabled Button -->
    <button type="submit" disabled>Submit</button>
</form>