如何实现浏览器中表单控件文本与普通文本一同复制？

针对Firefox中选中复制时跳过input、select控件内容的问题，可通过HTML结构调整结合CSS定位实现完整复制，无需JavaScript：

实现思路 #

用普通<span>标签承载表单控件的文本内容，让表单控件绝对定位覆盖在<span>上方：

• 普通<span>的文本会被正常纳入选中范围，复制时能被获取
• 表单控件设置user-select: none避免干扰文本选中，同时保留正常交互功能

示例代码 #

foo 
<span style="position: relative; display: inline-block; min-width: 60px;">
  <span>bar</span>
  <input type="text" value="bar" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; border: 1px solid #ccc; user-select: none;">
</span>
<span style="position: relative; display: inline-block; min-width: 60px;">
  <span>baz</span>
  <select style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; user-select: none;">
    <option>baz</option>
  </select>
</span> qux

注意事项 #

• 外层<span>设置display: inline-block和min-width，确保表单控件有足够显示空间
• 表单控件设置width: 100%; height: 100%，保证完全覆盖下方的文本节点
• 该方案适用于静态内容场景，若需支持用户修改表单内容后的动态复制，仍需JavaScript辅助，但完全满足你无需JS的需求

内容的提问来源于stack exchange，提问作者Joseph Sible-Reinstate Monica