HTML如何设置表单输入只读？readonly属性的作用是什么？

答案：HTML表单输入框通过添加readonly属性实现只读，用户不可编辑但可选中复制，且值会提交至服务器；与disabled不同，readonly仍可聚焦，disabled则完全禁用且不提交值；JavaScript可通过设置元素的readOnly属性或使用setAttribute/removeAttribute方法动态控制只读状态。

HTML表单输入框设置只读，主要通过在对应的

input

textarea

readonly

解决方案

要让一个表单输入框变成只读，你只需要在HTML的

input

textarea

readonly

例如，一个只读的文本输入框会是这样的：

<input type="text" value="这是一个只读的文本" readonly>

如果你想让一个多行文本区域只读：

立即学习“前端免费学习笔记（深入）”；

<textarea readonly>
  这段文字是只读的，用户不能修改。
</textarea>

当浏览器渲染这些元素时，它们看起来会像普通的输入框，但你尝试点击或输入时，会发现内容无法被改变。这一点很重要，它和

disabled

readonly

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

和

disabled

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

有什么区别？

这是个老生常谈但又极其关键的问题。很多人，包括我自己在初学时，都容易把

readonly

disabled

readonly

disabled

具体来看：

• 用户交互：

  • readonly

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制
    ：用户不能修改输入框的值，但可以聚焦（点击进入输入状态）、可以选中其中的文本、可以复制文本。它仍然是表单的一部分，只是内容被“冻结”了。

  • disabled

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制
    ：用户完全不能与输入框进行交互。不能聚焦、不能输入、不能选中、不能复制。它在视觉上通常会呈现为灰色或半透明，看起来就是“不可用”的状态。

• 表单提交：

  • readonly

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制
    ：输入框的值会随着表单一起提交到服务器。这是它最核心的特性之一，也是和

    disabled

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制
    最大的不同。

  • disabled

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制
    ：输入框的值不会被提交到服务器。这意味着如果你禁用了一个字段，后端就收不到它的值了。这在处理某些需要条件性提交的表单时非常有用，比如一个多步骤表单，某些字段只在特定条件下才有效。

• 样式和行为：

  • readonly

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制
    ：默认情况下，浏览器对

    readonly

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制
    字段的样式改变不大，可能只是鼠标指针略有不同。你可以通过CSS完全控制它的样式，让它看起来更像一个普通的文本，或者明确表示其只读状态。

  • disabled

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制
    ：浏览器通常会对

    disabled

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制
    字段应用一套默认的灰色样式，使其看起来是不可用的。同时，

    disabled

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制
    字段不会参与Tab键的导航顺序，用户无法通过Tab键聚焦到它。

• 使用场景：

  • readonly

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制
    ：适用于展示预填充数据（如用户信息、订单号），这些数据需要用户看到但不能修改，同时又需要在表单提交时一并发送。比如，一个用户注册页面，你可能预填了用户的邮箱，并将其设为只读，以确保用户知道其注册邮箱，但不能更改。

  • disabled

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制
    ：适用于暂时禁用某个功能或字段，直到满足特定条件。比如，一个注册表单的“提交”按钮，可能在所有必填项都填写完整之前是

    disabled

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制

    登录后复制
    状态。或者，一个下拉菜单，只有当选择了某个选项后，另一个相关的输入框才会被启用。

举个例子：

<p>只读输入框 (值会被提交):</p>
<input type="text" name="product_id" value="ABC12345" readonly>

<p>禁用输入框 (值不会被提交):</p>
<input type="text" name="user_status" value="活跃" disabled>

理解了这两者的区别，你在构建表单时就能更精准地控制用户体验和数据流。我常常会根据业务逻辑，比如某个字段是后端传来的固定值，只是给用户看一眼，那肯定用

readonly

disabled

如何在 JavaScript 中动态设置或移除

readonly

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

属性？

在实际的Web应用中，我们经常需要根据用户的操作或者某些条件，动态地改变表单字段的状态。JavaScript就是实现这一点的利器。操作

readonly

假设你有一个输入框：

<input type="text" id="myInput" value="初始值">
<button onclick="toggleReadonly()">切换只读状态</button>

你可以通过两种主要方式来动态控制

readonly

1. 使用DOM元素的

   readonly

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制
   属性（推荐）： 每个HTML DOM元素都有一个对应的JavaScript属性，对于

   readonly

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制
   ，它就是

   readonly

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制
   （注意大小写，驼峰命名法）。这是一个布尔值，设置为

   true

   登录后复制
   就是只读，

   false

   登录后复制
   就是可编辑。

   function toggleReadonly() {
     const inputElement = document.getElementById('myInput');
     inputElement.readOnly = !inputElement.readOnly; // 切换状态
     console.log('当前只读状态:', inputElement.readOnly);
   }

   登录后复制

   这种方式简洁直观，是处理布尔属性的首选方法。

2. 使用

   setAttribute()

   登录后复制

   登录后复制
   和

   removeAttribute()

   登录后复制

   登录后复制
   ： 你也可以像操作其他HTML属性一样，使用

   setAttribute()

   登录后复制

   登录后复制
   和

   removeAttribute()

   登录后复制

   登录后复制
   方法。

   function toggleReadonlyAlt() {
     const inputElement = document.getElementById('myInput');
     if (inputElement.hasAttribute('readonly')) {
       inputElement.removeAttribute('readonly');
       console.log('已移除只读属性');
     } else {
       inputElement.setAttribute('readonly', ''); // 或 'readonly'
       console.log('已设置只读属性');
     }
   }

   登录后复制

   这里需要注意的是，

   setAttribute('readonly', '')

   登录后复制
   或

   setAttribute('readonly', 'readonly')

   登录后复制
   都可以，因为

   readonly

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制
   是一个布尔属性，只要属性存在即可。

在实际开发中，我更倾向于使用

element.readOnly = true/false

readonly

设置

readonly

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

登录后复制

后，用户还能复制或聚焦输入框吗？

是的，完全可以。这是

readonly

disabled

当一个HTML输入框被设置为

readonly

1. 用户可以聚焦（Focus）： 你仍然可以通过鼠标点击或者Tab键导航到这个输入框。当输入框获得焦点时，它通常会显示出浏览器默认的焦点样式（比如一个边框）。这意味着它仍然是表单流中的一个活动元素，只是其内容被锁定。
2. 用户可以选中（Select）： 输入框中的文本内容可以被用户选中。用户可以用鼠标拖拽选择文本，或者通过键盘快捷键（如Ctrl+A全选）。
3. 用户可以复制（Copy）： 选中后的文本可以被复制到剪贴板。用户可以使用Ctrl+C（或Cmd+C）快捷键，或者通过右键菜单的“复制”选项。

为什么会有这种设计呢？因为很多时候，我们希望向用户展示一些信息，这些信息是预设的、不容修改的，但用户可能需要用到这些信息。比如：

• 订单号： 你的订单确认页面显示一个订单号，这个号是系统生成的，用户不能改，但用户可能需要复制它去查询物流或者提供给客服。
• 用户ID/账号： 在个人资料页面，用户的唯一ID通常是只读的，但用户可能需要复制它来绑定其他服务。
• 计算结果： 某些表单字段的值可能是根据其他输入自动计算出来的，用户不应直接编辑，但他们可能需要复制这个计算结果。

正是因为

readonly

readonly

div

span

以上就是HTML如何设置表单输入只读？readonly属性的作用是什么？的详细内容，更多请关注php中文网其它相关文章！