【input（设置readonly）】在网页开发中，`` 元素是用于收集用户输入信息的重要组件。有时候，我们希望用户不能修改某个输入框的内容，但又需要保留其显示效果，这时候就可以使用 `readonly` 属性。
一、总结
`readonly` 是 HTML 中 `` 标签的一个属性，用于设置输入框为只读状态。用户无法修改该字段的内容，但可以选中和复制文本。与 `disabled` 属性不同，`readonly` 的输入框仍然可以被提交到服务器，并且在表单中会被包含进去。
使用 `readonly` 可以提高用户体验，防止误操作，同时保持数据的完整性。
二、常见用法对比
| 属性 | 是否可编辑 | 是否可提交 | 是否可复制 | 是否可聚焦 |
| `readonly` | ❌ | ✅ | ✅ | ✅ |
| `disabled` | ❌ | ❌ | ❌ | ❌ |
| 默认（无属性） | ✅ | ✅ | ✅ | ✅ |
三、使用示例
```html
```
上述代码会生成一个只读的输入框，内容为 "admin"，用户无法更改。
四、注意事项
- `readonly` 属性适用于所有类型的 ``，如 text、email、number 等。
- 使用 `readonly` 时，建议配合 `value` 属性一起使用，确保初始值正确。
- 在 JavaScript 中，可以通过 `element.readOnly = true;` 或 `element.setAttribute('readonly', 'readonly');` 动态设置只读状态。
- 不同浏览器对 `readonly` 的支持基本一致，但某些特殊场景下可能有细微差异。
五、适用场景
- 显示系统生成的唯一标识符（如订单号）
- 防止用户修改已确认的数据
- 表单预填充信息，避免误改
- 提高表单的可用性和安全性
通过合理使用 `readonly` 属性，可以有效提升网页交互体验和数据管理的可靠性。
