Quartz 4

复制内容到剪切板

5 min read

复制内容到剪切板

功能说明

本教程介绍如何在 React 中实现将 input 输入框的内容复制到剪切板。以下整理了多种实现方式，包括原生方法和使用第三方库的方式。

方式一：使用原生 DOM 操作（document.execCommand 方法）

实现步骤

  1. 通过 useRef 引用 input 输入框。
  2. 创建临时 input 元素，将需要复制的内容写入其中。
  3. 使用 execCommand('copy') 将内容复制到剪切板。
  4. 移除临时 input 元素，清理 DOM。

核心代码

import React, { useRef } from 'react';
import './App.css';
 
function App() {
  const myInput = useRef(null); // 获取 input 引用
 
  // 复制内容到剪切板
  function handleClickCopy() {
    const copyText = myInput.current.value; // 获取输入框内容
    if (copyText) {
      const copyInput = document.createElement('input'); // 创建临时输入框
      copyInput.setAttribute('value', copyText);
      document.body.appendChild(copyInput); // 添加到文档
      copyInput.select(); // 选中内容
 
      try {
        document.execCommand('copy'); // 复制内容
        console.log('复制成功');
      } catch (err) {
        console.error('浏览器不兼容:', err);
      } finally {
        document.body.removeChild(copyInput); // 移除临时输入框
      }
    } else {
      console.log('请输入内容');
    }
  }
 
  return (
    <div className="App">
      <header className="App-header">
        <input type="text" ref={myInput} placeholder="请输入内容" />
        <button onClick={handleClickCopy}>点击复制</button>
      </header>
    </div>
  );
}
 
export default App;

方式二：使用现代 API（navigator.clipboard.writeText 方法）

实现步骤

  1. 获取需要复制的内容。
  2. 使用 navigator.clipboard.writeText 方法直接将内容写入剪切板。
  3. 异步处理复制成功或失败的情况。

核心代码

import React, { useRef } from 'react';
 
function App() {
  const myInput = useRef(null);
 
  async function handleClickCopy() {
    const copyText = myInput.current.value;
    if (copyText) {
      try {
        await navigator.clipboard.writeText(copyText); // 写入剪切板
        console.log('复制成功');
      } catch (err) {
        console.error('复制失败:', err);
      }
    } else {
      console.log('请输入内容');
    }
  }
 
  return (
    <div className="App">
      <header className="App-header">
        <input type="text" ref={myInput} placeholder="请输入内容" />
        <button onClick={handleClickCopy}>点击复制</button>
      </header>
    </div>
  );
}
 
export default App;

方式三：使用第三方库（如 react-copy-to-clipboard）

库介绍

react-copy-to-clipboard 是一个轻量级的库，专门用于复制内容到剪切板，支持各种 React 项目。

安装

npm install react-copy-to-clipboard

核心代码

import React, { useState } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
 
function App() {
  const [copyText, setCopyText] = useState('');
  const [isCopied, setIsCopied] = useState(false);
 
  return (
    <div className="App">
      <header className="App-header">
        <input
          type="text"
          value={copyText}
          onChange={(e) => setCopyText(e.target.value)}
          placeholder="请输入内容"
        />
        <CopyToClipboard
          text={copyText} // 要复制的内容
          onCopy={() => setIsCopied(true)} // 复制成功回调
        >
          <button>点击复制</button>
        </CopyToClipboard>
        {isCopied && <p>复制成功！</p>}
      </header>
    </div>
  );
}
 
export default App;

方式四：通过 contenteditable 实现

实现步骤

  1. 使用一个 div 元素，设置其 contentEditable 属性为 true。
  2. 监听复制按钮，获取 div 中的内容。
  3. 使用现代 API navigator.clipboard.writeText 复制内容。

核心代码

import React, { useRef } from 'react';
 
function App() {
  const editableDiv = useRef(null);
 
  async function handleClickCopy() {
    const copyText = editableDiv.current.innerText;
    if (copyText) {
      try {
        await navigator.clipboard.writeText(copyText);
        console.log('复制成功');
      } catch (err) {
        console.error('复制失败:', err);
      }
    } else {
      console.log('请输入内容');
    }
  }
 
  return (
    <div className="App">
      <header className="App-header">
        <div
          ref={editableDiv}
          contentEditable="true"
          style={{
            border: '1px solid #ccc',
            padding: '5px',
            minHeight: '30px',
            width: '200px',
          }}
          placeholder="请输入内容"
        ></div>
        <button onClick={handleClickCopy}>点击复制</button>
      </header>
    </div>
  );
}
 
export default App;

总结

实现方式特点
方式一：execCommand兼容性较好，适用于旧浏览器；已被标记为弃用，建议逐步迁移到现代 API。
方式二：clipboard API使用简单，现代浏览器支持较好；推荐使用，异步处理更安全。
方式三：第三方库封装程度高，适合快速开发；对复杂需求（如复制时回调）提供支持。
方式四：contenteditable适合直接从可编辑区域复制内容；灵活性高，但需要注意 contenteditable 的兼容性与样式调整。

对于现代浏览器，推荐使用 方式二 或 方式三，因为它们支持更好的异步处理和用户体验。如果需要兼容性支持，可以结合 方式一 和其他方法使用。

Graph View