如何用JavaScript将输入文本、下拉值等多字段内容一键复制为单行

完整实现代码 #

HTML 结构

先搭建带输入项和预览区域的表单，给每个输入字段设置独立ID，同时添加可编辑的文本区域用来预览和修改最终内容：

<!-- 输入表单 -->
<div class="input-group">
  <label>编号：</label>
  <input type="text" id="ticketId" placeholder="输入编号">
</div>
<div class="input-group">
  <label>问题名称：</label>
  <input type="text" id="issueName" placeholder="输入问题名称">
</div>
<div class="input-group">
  <label>产品名称：</label>
  <input type="text" id="productName" placeholder="输入产品名称">
</div>
<div class="input-group">
  <label>数量：</label>
  <input type="text" id="quantity" placeholder="输入数量（如Q-1）">
</div>
<div class="input-group">
  <label>解决方案：</label>
  <input type="text" id="solution" placeholder="输入解决方案">
</div>

<!-- 预览/编辑区域 -->
<div class="preview-group">
  <label>最终内容（可修改）：</label>
  <textarea id="resultArea" rows="2" readonly></textarea>
</div>

<!-- 复制按钮 -->
<button onclick="copyToClipboard()">复制到剪贴板</button>

JavaScript 逻辑

替换原有函数，实现自动拼接格式+支持修改后复制的功能：

function copyToClipboard() {
  // 1. 获取所有输入字段的值
  const ticketId = document.getElementById('ticketId').value.trim();
  const issueName = document.getElementById('issueName').value.trim();
  const productName = document.getElementById('productName').value.trim();
  const quantity = document.getElementById('quantity').value.trim();
  const solution = document.getElementById('solution').value.trim();

  // 2. 按指定格式拼接内容
  const formattedContent = `${ticketId} // ${issueName} // ${productName} // ${quantity} // ${solution} //`;

  // 3. 将拼接内容放入预览框，临时取消只读允许修改
  const resultArea = document.getElementById('resultArea');
  resultArea.value = formattedContent;
  resultArea.removeAttribute('readonly');
  resultArea.focus();
  resultArea.select();

  // 4. 执行复制操作，兼容新旧浏览器
  try {
    navigator.clipboard.writeText(resultArea.value);
    alert("内容已复制到剪贴板！");
  } catch (err) {
    document.execCommand('copy');
    alert("内容已复制到剪贴板！");
  }

  // 5. 恢复预览框只读状态，防止误修改
  setTimeout(() => {
    resultArea.setAttribute('readonly', true);
  }, 100);
}

功能说明 #

• 自动拼接格式：用户输入完字段后，点击按钮会自动按指定格式生成内容
• 支持修改：拼接后的内容会放入可编辑文本框，用户可直接修改后再复制
• 多浏览器兼容：同时使用现代剪贴板API和旧版方法，确保多数浏览器正常运行
• 操作反馈：复制成功后弹出提示，明确告知操作结果

内容的提问来源于stack exchange，提问作者Kishh Slv