HTML如何设置表单输入只读？readonly属性的作用是什么？-html教程-PHP中文网

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

小老鼠

发布： 2025-08-18 15:18:02

原创

667人浏览过

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

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

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

举个例子：

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

<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

登录后复制

属性：

使用DOM元素的
```
readonly
```
登录后复制
属性（推荐）： 每个HTML DOM元素都有一个对应的JavaScript属性，对于
```
readonly
```
登录后复制
，它就是
```
readonly
```
登录后复制
（注意大小写，驼峰命名法）。这是一个布尔值，设置为
```
true
```
登录后复制
就是只读，
```
false
```
登录后复制
就是可编辑。
```
function toggleReadonly() {
  const inputElement = document.getElementById('myInput');
  inputElement.readOnly = !inputElement.readOnly; // 切换状态
  console.log('当前只读状态:', inputElement.readOnly);
}
```
登录后复制
这种方式简洁直观，是处理布尔属性的首选方法。

使用

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

登录后复制

，因为它更符合JavaScript的面向对象思维，操作起来也更直接。例如，在一个订单确认页面，如果用户选择了“使用上次地址”的选项，我可能会用JS将地址输入框设为

readonly

登录后复制

，并填充上次的地址，以防止用户误改。如果用户取消勾选，再将其恢复为可编辑状态。这种动态性极大地提升了用户体验。

设置

readonly

登录后复制

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

是的，完全可以。这是

readonly

登录后复制

属性的一个重要特性，也是它与

disabled

登录后复制

属性的另一个关键区别。

当一个HTML输入框被设置为

readonly

登录后复制

时：

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

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