Trang chủ Lập trình Javascript Thực hiện lênh “copy” vào clipboard bằng Javascript

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

6
2
Thực hiện lênh
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

Copying text to the clipboard shouldn’t be hard. It shouldn’t require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn’t depend on Flash or any bloated framework.

That’s why clipboard.js exists.

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