Cách sao chép văn bản

Joe Medley
Joe Medley
Twitter GitHub

Cắt và dán văn bản là một trong những tính năng được sử dụng phổ biến nhất của ứng dụng nói chung và ứng dụng dành cho máy tính để bàn nói riêng. Làm cách nào để sao chép văn bản trên web? Có cả cách cũ và cách mới. Và phụ thuộc vào trình duyệt nào được sử dụng.

Phong cách hiện đại

Sử dụng API Bảng nhớ tạm không đồng bộ

Phương thức Clipboard.writeText() lấy một chuỗi và trả về một Hứa hẹn sẽ phân giải khi văn bản được ghi thành công vào bảng nhớ tạm. Chỉ có thể sử dụng Clipboard.writeText() từ đối tượng window có tâm điểm.

Hỗ trợ trình duyệt

  • 66
  • 79
  • 63
  • 13,1

Nguồn

Cách cổ điển

Sử dụng document.execCommand()

Việc gọi document.execCommand('copy') sẽ trả về một giá trị boolean cho biết bản sao có thành công hay không. Hãy gọi lệnh này bên trong một cử chỉ của người dùng, chẳng hạn như trình xử lý lượt nhấp. Phương pháp này có một số điểm hạn chế so với API bảng nhớ tạm không đồng bộ. Phương thức execCommand() chỉ hoạt động với các phần tử DOM. Vì tính đồng bộ nên việc sao chép một lượng lớn dữ liệu, đặc biệt là những dữ liệu phải được chuyển đổi hoặc dọn dẹp theo một cách nào đó, có thể chặn trang.

Hỗ trợ trình duyệt

  • 1
  • 12
  • 1
  • 1.3

Nguồn

Nâng cao dần dần

const copyButton = document.querySelector('#copyButton');
const out = document.querySelector('#out');

if ('clipboard' in navigator) {
  copyButton.addEventListener('click', () => {
    navigator.clipboard.writeText(out.value)
    .then(() => {
      console.log('Text copied');
    })
    .catch((err) => console.error(err.name, err.message));
  });
} else {
  copyButton.addEventListener('click', () => {
    const textArea = document.createElement('textarea');
    textArea.value = out.value;
    textArea.style.opacity = 0;
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    try {
      const success = document.execCommand('copy');
      console.log(`Text copy was ${success ? 'successful' : 'unsuccessful'}.`);
    } catch (err) {
      console.error(err.name, err.message);
    }
    document.body.removeChild(textArea);
  });
}

Tài liệu đọc thêm

Bản minh họa

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="icon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
    />
    <title>How to copy text</title>
  </head>
  <body>
    <h1>How to copy text</h1>
    <textarea rows="3">
Some sample text for you to copy. Feel free to edit this.</textarea
    >
    <button type="button">Copy</button>
  </body>
</html>

CSS


        :root {
  color-scheme: dark light;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 1rem;
  font-family: system-ui, sans-serif;
}

button {
  display: block;
}

JS


        const textarea = document.querySelector('textarea');
const button = document.querySelector('button');

button.addEventListener('click', async () => {
  try {
    await navigator.clipboard.writeText(textarea.value);
  } catch (err) {
    console.error(err.name, err.message);
  }
});