如何用JavaScript实现单按钮复制多HTML输入区域内容（含固定文本并换行）

Got it, let's build this office note generator step by step. Here's a complete, working solution that lets you plug in your variable content, then click a button to merge it with your 10 fixed points, format it with line breaks, and copy everything straight to your clipboard.

Step 1: The HTML Structure #

We'll create input fields for each piece of variable content (adjust the number/labels to match your actual needs) and a section for your fixed 10-point template.

<div class="note-generator">
  <h2>Quick Office Note Builder</h2>
  
  <!-- Variable input fields - customize these labels to fit your use case -->
  <div class="input-group">
    <label for="projectName">Project Name:</label>
    <input type="text" id="projectName" placeholder="Enter project name">
  </div>
  <div class="input-group">
    <label for="taskDate">Task Date:</label>
    <input type="text" id="taskDate" placeholder="MM/DD/YYYY">
  </div>
  <div class="input-group">
    <label for="assignedTo">Assigned To:</label>
    <input type="text" id="assignedTo" placeholder="Name/Team">
  </div>
  <div class="input-group">
    <label for="statusUpdate">Status Update:</label>
    <textarea id="statusUpdate" rows="3" placeholder="Brief status overview"></textarea>
  </div>

  <!-- Copy button -->
  <button id="copyNoteBtn">Generate & Copy Note</button>
  
  <!-- Optional success message -->
  <p id="successMsg" class="hidden">Note copied to clipboard! 🎉</p>
</div>

Step 2: The JavaScript Functionality #

This is where we pull all the input values, merge them with your fixed 10-point template, format it with line breaks, and copy it to the clipboard.

// Wait for the page to fully load
document.addEventListener('DOMContentLoaded', function() {
  const copyBtn = document.getElementById('copyNoteBtn');
  const successMsg = document.getElementById('successMsg');

  // Define your 10 FIXED note points here - edit these to match your actual template
  const fixedPoints = [
    "1. Initial task kickoff completed",
    "2. Stakeholder feedback received",
    "3. Draft documentation prepared",
    "4. Core functionality tested",
    "5. Minor bugs identified & logged",
    "6. Follow-up meeting scheduled",
    "7. Resource allocation confirmed",
    "8. Deadline reviewed & aligned",
    "9. Risk assessment updated",
    "10. Next steps outlined"
  ];

  copyBtn.addEventListener('click', async function() {
    // Get all variable input values
    const projectName = document.getElementById('projectName').value.trim();
    const taskDate = document.getElementById('taskDate').value.trim();
    const assignedTo = document.getElementById('assignedTo').value.trim();
    const statusUpdate = document.getElementById('statusUpdate').value.trim();

    // Build the full note: variable content first, then fixed points
    let fullNote = '';
    // Add variable sections (only if they have content - optional, adjust as needed)
    if (projectName) fullNote += `Project: ${projectName}\n`;
    if (taskDate) fullNote += `Date: ${taskDate}\n`;
    if (assignedTo) fullNote += `Assigned To: ${assignedTo}\n`;
    if (statusUpdate) fullNote += `Status Update: ${statusUpdate}\n\n`;

    // Add the fixed 10 points, each on a new line
    fullNote += fixedPoints.join('\n');

    try {
      // Copy to clipboard
      await navigator.clipboard.writeText(fullNote);
      // Show success message
      successMsg.classList.remove('hidden');
      setTimeout(() => successMsg.classList.add('hidden'), 3000);
    } catch (err) {
      // Fallback if clipboard API fails (older browsers)
      alert('Failed to copy note. Please copy manually:\n\n' + fullNote);
      console.error('Copy error:', err);
    }
  });
});

Step 3: Basic CSS for Office-Friendly UI #

Let's make it look polished instead of plain HTML:

.note-generator {
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.input-group {
  margin-bottom: 1rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #333;
}

input, textarea {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

button:hover {
  background-color: #0056b3;
}

#successMsg {
  margin-top: 1rem;
  color: #28a745;
  font-weight: bold;
}

.hidden {
  display: none;
}

Key Features Explained: #

• Flexible Variable Content: The input fields are customizable - add/remove them based on what variable info you need to include before the fixed points.
• Smart Merging: Only includes variable sections if they have content (no empty lines cluttering your note).
• Clipboard Support: Uses the modern navigator.clipboard API for seamless copying, with a fallback alert for older browsers.
• User Feedback: Shows a temporary success message so you know the copy worked.

Just edit the fixedPoints array in the JavaScript to match your exact 10 note points, and adjust the input fields to fit your variable data needs.

内容的提问来源于stack exchange，提问作者Youssef Sayed