在 HTML 中，input 元素的 readonly 和 disabled 属性都用于限制用户对输入字段的编辑操作，但它们之间有一些关键的区别，影响它们在表单提交、样式、和交互方面的表现。以下是对这两个属性的详细理解和比较。

1. readonly 属性

  • 作用：
    • readonly 属性使得输入字段的值不能被修改，但字段的内容仍然可以被选中和复制。
    • 它通常用于文本输入框（如 <input type="text"> 或 <textarea>）中，以防止用户修改值，但允许他们查看或复制文本。
  • 行为：
    • 用户不能编辑输入框中的内容。
    • 但是，用户仍然可以通过 鼠标右键菜单 或 键盘快捷键（如 Ctrl+C 或 Cmd+C）来 复制文本。
    • 表单提交时，readonly 字段的值仍然会被提交。
  • 样式和交互：
    • readonly 字段的样式通常和正常输入框一样，没有特别的视觉效果，除非开发者自定义了样式。
    • 输入框仍然可以聚焦（获得光标），并且允许使用键盘选择文本。
  • 使用场景：
    • 当你想要允许用户查看但不修改某些信息时，比如显示用户的用户名、电子邮件地址等。

示例：

<input type="text" value="This is readonly" readonly>

在上面的例子中，用户不能编辑输入框中的内容，但可以选中并复制该文本。

2. disabled 属性

  • 作用：
    • disabled 属性使得输入字段完全不可用（禁用），无法进行任何交互，包括编辑、选择、点击、或者提交表单。
    • 它不仅限制用户修改字段的内容，还禁止用户与输入框进行任何交互。
  • 行为：
    • 用户无法编辑输入框中的内容。
    • 用户无法选中、复制或与输入框互动（例如，不可点击、聚焦等）。
    • 表单提交时，disabled 字段的值不会被提交。这意味着即使输入框有一个值，如果它是 disabled，该值不会随着表单一起提交。
  • 样式和交互：
    • 浏览器通常会为 disabled 元素应用灰色样式，以明确指示该元素不可用。不同浏览器可能会有所不同，但通常是 input 字段会变灰或变得不透明。
    • disabled 字段不能获得焦点，因此用户不能通过键盘或鼠标直接与之交互。
  • 使用场景：
    • 当你想让输入框完全失效、不可交互时，比如禁用某些表单字段，或者在某些条件下不允许用户修改某些信息。

示例：

<input type="text" value="This is disabled" disabled>

在这个例子中，输入框被禁用了，用户不能编辑、选择或复制文本，且表单提交时不会包含该字段的值。

readonly vs disabled：区别

特性readonlydisabled
允许编辑内容不允许编辑，但可以选中并复制文本。不允许编辑，也不允许选中或复制文本。
表单提交提交该字段的值。不提交该字段的值。
样式没有特别的视觉效果，依赖浏览器的默认样式。通常会改变外观，显示为灰色或不可交互。
焦点交互允许输入框获得焦点和光标，可以选择文本。不允许输入框获得焦点和光标，完全禁用交互。
适用场景适用于只读信息，需要显示但不允许修改的情况。适用于禁用表单项，不允许用户任何交互的情况。

总结：

  • readonly 适用于那些你希望用户能够查看但不能修改的字段，同时允许用户选择和复制字段内容。它影响的是输入框的编辑能力，但不影响表单提交。
  • disabled 完全禁用字段，不允许用户与字段交互，并且不会提交字段的值，常用于需要完全禁用用户操作的场景。

根据具体需求选择使用哪一个属性：如果你只想限制编辑操作而允许用户查看或复制内容，使用 readonly；如果你希望完全禁用用户交互，选择 disabled。