表单输入只读设置方法详解

珍惜时间，勤奋学习！今天给大家带来《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>
&lt;input type=&quot;text&quot; name=&quot;product_id&quot; value=&quot;ABC12345&quot; readonly&gt;

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

理解了这两者的区别，你在构建表单时就能更精准地控制用户体验和数据流。我常常会根据业务逻辑，比如某个字段是后端传来的固定值，只是给用户看一眼，那肯定用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，因为它更符合JavaScript的面向对象思维，操作起来也更直接。例如，在一个订单确认页面，如果用户选择了“使用上次地址”的选项，我可能会用JS将地址输入框设为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去展示，因为那样用户就无法直接复制了，体验会大打折扣。当然，为了视觉上的区分，我通常会给只读的输入框加一些CSS样式，让它看起来更像一个不可编辑的文本框，但又不失其作为表单元素的特性。

今天关于《表单输入只读设置方法详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！