答案：HTML表单输入框通过添加readonly属性实现只读，用户不可编辑但可选中复制，且值会提交至服务器；与disabled不同，readonly仍可聚焦，disabled则完全禁用且不提交值；JavaScript可通过设置元素的readOnly属性或使用setAttribute/removeAttribute方法动态控制只读状态。
HTML表单输入框设置只读，主要通过在对应的
input
或
textarea
标签上添加
readonly
属性来实现。这个属性的作用是让用户无法编辑输入框中的内容，但它的值依然会被提交到服务器，并且用户仍然可以选中、复制其中的文本。这在很多场景下都非常有用，比如展示一些预设的、用户不应该修改的数据。
解决方案
要让一个表单输入框变成只读，你只需要在HTML的
input
或
textarea
标签中简单地加上
readonly
这个布尔属性。不需要给它赋值，只要存在就行。
例如，一个只读的文本输入框会是这样的：
如果你想让一个多行文本区域只读：
立即学习“前端免费学习笔记（深入）”；
当浏览器渲染这些元素时，它们看起来会像普通的输入框，但你尝试点击或输入时，会发现内容无法被改变。这一点很重要，它和
disabled
属性有本质的区别，后面我们会详细聊聊。对我个人而言，刚开始接触前端时，这俩属性的区分着实让我困惑了一阵子，总觉得它们是不是一个东西。但实际上，它们的应用场景和行为逻辑完全不同。
readonly
readonly
和
disabled
有什么区别？
这是个老生常谈但又极其关键的问题。很多人，包括我自己在初学时，都容易把
readonly
和
disabled
混淆。简单来说，
readonly
是“不可编辑”，而
disabled
是“禁用”。
具体来看：
用户交互：
readonly
：用户不能修改输入框的值，但可以聚焦（点击进入输入状态）、可以选中其中的文本、可以复制文本。它仍然是表单的一部分，只是内容被“冻结”了。
disabled
：用户完全不能与输入框进行交互。不能聚焦、不能输入、不能选中、不能复制。它在视觉上通常会呈现为灰色或半透明，看起来就是“不可用”的状态。
表单提交：
readonly
：输入框的值会随着表单一起提交到服务器。这是它最核心的特性之一，也是和
disabled
最大的不同。
disabled
：输入框的值不会被提交到服务器。这意味着如果你禁用了一个字段，后端就收不到它的值了。这在处理某些需要条件性提交的表单时非常有用，比如一个多步骤表单，某些字段只在特定条件下才有效。
样式和行为：
readonly
：默认情况下，浏览器对
readonly
字段的样式改变不大，可能只是鼠标指针略有不同。你可以通过CSS完全控制它的样式，让它看起来更像一个普通的文本，或者明确表示其只读状态。
disabled
：浏览器通常会对
disabled
字段应用一套默认的灰色样式，使其看起来是不可用的。同时，
disabled
字段不会参与Tab键的导航顺序，用户无法通过Tab键聚焦到它。
使用场景：
readonly
：适用于展示预填充数据（如用户信息、订单号），这些数据需要用户看到但不能修改，同时又需要在表单提交时一并发送。比如，一个用户注册页面，你可能预填了用户的邮箱，并将其设为只读，以确保用户知道其注册邮箱，但不能更改。
disabled
：适用于暂时禁用某个功能或字段，直到满足特定条件。比如，一个注册表单的“提交”按钮，可能在所有必填项都填写完整之前是
disabled
状态。或者，一个下拉菜单，只有当选择了某个选项后，另一个相关的输入框才会被启用。
举个例子：
只读输入框 (值会被提交):
禁用输入框 (值不会被提交):
理解了这两者的区别，你在构建表单时就能更精准地控制用户体验和数据流。我常常会根据业务逻辑，比如某个字段是后端传来的固定值，只是给用户看一眼，那肯定用
readonly
；如果某个功能依赖于前一个步骤的完成，那它对应的输入框或按钮就应该先
disabled
。
如何在 JavaScript 中动态设置或移除
readonly
readonly
属性？
在实际的Web应用中，我们经常需要根据用户的操作或者某些条件，动态地改变表单字段的状态。JavaScript就是实现这一点的利器。操作
readonly
属性非常直接。
假设你有一个输入框：
你可以通过两种主要方式来动态控制
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
后，用户还能复制或聚焦输入框吗？
是的，完全可以。这是
readonly
属性的一个重要特性，也是它与
disabled
属性的另一个关键区别。
当一个HTML输入框被设置为
readonly
时：
用户可以聚焦（Focus）： 你仍然可以通过鼠标点击或者Tab键导航到这个输入框。当输入框获得焦点时，它通常会显示出浏览器默认的焦点样式（比如一个边框）。这意味着它仍然是表单流中的一个活动元素，只是其内容被锁定。用户可以选中（Select）： 输入框中的文本内容可以被用户选中。用户可以用鼠标拖拽选择文本，或者通过键盘快捷键（如Ctrl+A全选）。用户可以复制（Copy）： 选中后的文本可以被复制到剪贴板。用户可以使用Ctrl+C（或Cmd+C）快捷键，或者通过右键菜单的“复制”选项。
为什么会有这种设计呢？因为很多时候，我们希望向用户展示一些信息，这些信息是预设的、不容修改的，但用户可能需要用到这些信息。比如：
订单号： 你的订单确认页面显示一个订单号，这个号是系统生成的，用户不能改，但用户可能需要复制它去查询物流或者提供给客服。用户ID/账号： 在个人资料页面，用户的唯一ID通常是只读的，但用户可能需要复制它来绑定其他服务。计算结果： 某些表单字段的值可能是根据其他输入自动计算出来的，用户不应直接编辑，但他们可能需要复制这个计算结果。
正是因为
readonly
允许聚焦、选中和复制，它才显得如此灵活和实用。它在保证数据完整性的同时，也兼顾了用户获取信息的便利性。我个人在设计表单时，如果某个字段是后端返回的固定值，并且用户可能会想复制它，我都会毫不犹豫地选择
readonly
，而不是用一个普通的
div
或者
span
去展示，因为那样用户就无法直接复制了，体验会大打折扣。当然，为了视觉上的区分，我通常会给只读的输入框加一些CSS样式，让它看起来更像一个不可编辑的文本框，但又不失其作为表单元素的特性。
以上就是HTML如何设置表单输入只读？readonly属性的作用是什么？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1572599.html
微信扫一扫 
支付宝扫一扫 
