Thực hiện lênh “copy” vào clipboard bằng Javascript

Một phương pháp đơn giản nếu như bạn không muốn sử dụng clipboardjs để copy một đoạn text vào trong clipboard, đó là sử dụng đơn thuần lệnh:

document.execCommand('copy');

Với cách này, bạn chỉ mất 30s để thực hiện việc copy một đoạn text vào trong clipboard mà không cần phải bôi đen (select) đoạn văn bản đó, function sau đây sẽ tự động làm việc:

const copyToClipboard = str => {
  const el = document.createElement('textarea');
  el.value = str;
  el.setAttribute('readonly', '');
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
};

Chúng ta có 1 hàm copyToClipboard:

1. Nó sẽ tạo ra một <textarea> được chền vào trang web. Gắn giá trị value của textarea một đoạn string bạn mong muốn được copy vào clipboard.
2. Sử dụng HTMLInputElement.select() để select đoạn nội dung trong <textarea> vừa tạo ra.
3. Sử dụng Document.execCommand('copy') để copy đoạn nội dung trong <textarea> vào clipboard.
4. Sau đó là xoá <textarea> vừa tạo ra trong trang web.

Ngoài ra, chúng ta có thể tìm hiểu thêm về clipboardjs vì

Cám ơn các bạn đã theo dõi!