使用JavaScript复制指定标签内容至剪贴板（含无输入框场景）

Alright, let's break down your requirements and solve this properly. You want two things:

1. Copy specific text (from tags or direct input) to clipboard without creating extra input elements
2. Extend this to copy content from targeted page elements, while working with your existing code framework.

Here's the complete solution:

1. Perfecting the Basic Copy Function (Direct Text Input) #

Your existing copy(input) function can be upgraded using the modern Clipboard API—this is the cleanest way to handle clipboard operations without any DOM hacks.

function copy(input) {
  // Check if Clipboard API is supported
  if (!navigator.clipboard) {
    alert("Clipboard access isn't supported in your browser. Try updating or using a fallback method.");
    return;
  }

  // Write text to clipboard
  navigator.clipboard.writeText(input)
    .then(() => {
      alert(`Successfully copied: "${input}"`);
    })
    .catch(err => {
      console.error('Copy failed:', err);
      alert('Copy failed—check browser permissions or try again.');
    });
}

Your existing HTML works perfectly with this function:

<p>Text To Copy = hi <button type="button" onclick="copy('hi')">click to copy</button></p>

Key Notes: #

• The Clipboard API only works in secure contexts (HTTPS or localhost). If you're testing on a plain HTTP server, this won't work—use the fallback below instead.
• No extra input/textarea elements are needed here; we're directly interacting with the browser's clipboard.

2. Extending to Copy Content from Specific Page Tags #

If you need to grab text from a specific element (like a <p>, <div>, or custom tag), we can modify the function to accept a selector or element reference instead of raw text.

Option A: Copy via CSS Selector #

This lets you target elements using IDs, classes, or any valid CSS selector:

function copyFromElement(selector) {
  const targetElement = document.querySelector(selector);
  
  if (!targetElement) {
    alert('Could not find the specified element!');
    return;
  }

  // Get the element's text content (trim removes extra whitespace)
  const textToCopy = targetElement.textContent.trim();
  
  // Reuse our clipboard logic
  if (navigator.clipboard) {
    navigator.clipboard.writeText(textToCopy)
      .then(() => alert(`Copied: "${textToCopy}"`))
      .catch(err => {
        console.error('Copy failed:', err);
        alert('Copy failed—check permissions.');
      });
  } else {
    // Fallback for older browsers (see below)
    fallbackCopy(textToCopy);
  }
}

HTML Example:

<!-- Target element we want to copy -->
<p id="important-text">This is the text from a specific tag we want to copy!</p>

<!-- Button to trigger copy -->
<button onclick="copyFromElement('#important-text')">Copy Text from Tag</button>

Option B: Copy via Direct Element Reference #

If you already have a reference to the element (e.g., from an event handler), pass it directly:

function copyElementContent(element) {
  if (!(element instanceof HTMLElement)) {
    alert('Invalid element provided!');
    return;
  }

  const textToCopy = element.textContent.trim();
  
  navigator.clipboard.writeText(textToCopy)
    .then(() => alert(`Copied: "${textToCopy}"`))
    .catch(err => {
      console.error('Copy failed:', err);
      fallbackCopy(textToCopy);
    });
}

HTML Example:

<div class="copy-me">Another example of text to copy</div>
<button onclick="copyElementContent(document.querySelector('.copy-me'))">Copy This Div's Text</button>

Fallback for Older Browsers #

If you need to support browsers that don't have the Clipboard API (e.g., older versions of Safari/Edge), use this fallback that creates a temporary hidden textarea:

function fallbackCopy(text) {
  // Create a hidden textarea
  const tempTextarea = document.createElement('textarea');
  tempTextarea.value = text;
  
  // Style it to be invisible
  tempTextarea.style.position = 'absolute';
  tempTextarea.style.left = '-9999px';
  tempTextarea.style.top = '-9999px';
  
  document.body.appendChild(tempTextarea);
  
  // Select and copy the text
  tempTextarea.focus();
  tempTextarea.select();
  
  try {
    const success = document.execCommand('copy');
    alert(success ? 'Copied successfully!' : 'Copy failed—try manually.');
  } catch (err) {
    console.error('Fallback copy failed:', err);
    alert('Copy failed. Please copy manually.');
  }
  
  // Clean up the temporary element
  document.body.removeChild(tempTextarea);
}

You can integrate this fallback into your main functions (as shown in the copyFromElement example) to ensure maximum compatibility.

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