Copy to Clipboard trong Javascript

Làm cách nào để sao chép văn bản vào khay nhớ tạm bằng JavaScript?

Một nhu cầu rất phổ biến khi xây dựng trang web là khả năng sao chép văn bản vào khay nhớ tạm bằng một lần nhấp vào nút. Javascript có thể dễ dàng thực hiện điều này trong 5 bước:

1. Tạo một phần tử <textarea> để nối nó vào document. Đặt giá trị của nó thành chuỗi mà chúng ta muốn sao chép vào khay nhớ tạm.
2. Nối (Append) phần tử <textarea> vào HTML document hiện tại.
3. Sử dụng HTMLInputElement.select() để chọn (select) nội dung của phần tử <textarea>.
4. Sử dụng Document.execCommand('copy') để sao chép nội dung của <textarea> vào khay nhớ tạm.
5. Xóa phần tử <textarea> ra khỏi document.

{tocify} $title={Table of Contents}

Snippet Code for Angular

Code HTML

  <div class="col-12 position-relative mt-3">
    <button class="btn btn-sm btn-outline-primary copy-to-clipboard copy-for-blogger" title="Copy to clipboard"
      (click)="copyToClipboard(highlightedCode)">Copy for Blogger</button>
    <button class="btn btn-sm btn-outline-primary copy-to-clipboard" title="Copy to clipboard"
      (click)="copyTextToClipboard(highlightedCode)">Copy Text</button>
    <pre #highlightedCode><code>Text for test</code></pre>
  </div>

Code Javascript/Typescript

• Copy element với style css (copy cả format đang view) của nó cho các bài post trên blogger

  copyToClipboard(el: any) {
    const range = document.createRange();
    range.selectNodeContents(el);
    const sel = window.getSelection();
    sel && sel.removeAllRanges();
    sel && sel.addRange(range);
    document.execCommand('copy');
  }

• Chỉ copy text từ bất cứ element nào
  Bạn có thể không cần truyền element vào, để lấy nội dụng của 1 element bạn làm như sau:
  

  const str = document.getElementById('item-to-copy').innerText;

  // Copy text from any element
  copyTextToClipboard(htmlEl: any) {
    const el = document.createElement('textarea');
    el.value = htmlEl.innerText;
    el.setAttribute('readonly', '');
    el.style.position = 'absolute';
    el.style.left = '-9999px';
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
  }

• Copy text bất kỳ vào clipboard - Code version 1

  // Copy any text
  copyTextToClipboard(text: string) {
    let selBox = document.createElement('textarea');
    selBox.style.position = 'fixed';
    selBox.style.left = '0';
    selBox.style.top = '0';
    selBox.style.opacity = '0';
    selBox.value = text;
    document.body.appendChild(selBox);
    selBox.focus();
    selBox.select();
    document.execCommand('copy');
    document.body.removeChild(selBox);
  }

• Copy text bất kỳ vào clipboard - Code version 2

  // Copy any text
  copyTextToClipboard(text: string) {
    const el = document.createElement('textarea');
    el.value = text;
    el.setAttribute('readonly', '');
    el.style.position = 'absolute';
    el.style.left = '-9999px';
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
  }

Mình sẽ giải thích cách code ở trên hoạt động nhé:

1. Đầu tiền chúng ta sẽ tạo ra một phần tử textarea mới - trường hợp này sử dụng khi bạn muốn copy nội dụng của một phần tử không phải là textarea hoặc input. Nếu bạn copy nội dung của thẻ input hoặc textarea thì dùng cách phía dưới nhé. - Mục đích của việc tạo phần tử textarea ở đây là để có thể gọi được hàm select() để chọn nội dung của phần tử vì chúng ta chỉ có thể gọi hàm select() trên phần tử textarea và input.
2. Tiếp theo đó, chúng ta gán value của textarea mới tạo bằng nội dung text mà bạn muốn copy.
3. Gán một số thuộc tính như readonly và position absolute với ví trí left là -9999px để làm cho phần tử textarea mới tạo này không hiện thị với người dùng.
4. Sau đó, chúng ta sẽ append phần tử textarea này vào DOM để chúng ta có thể gọi hàm select() trên nó.
5. Sau khi gọi hàm select() trên phần tử textarea, chúng ta sẽ gọi document.execCommand('copy') để copy nội dụng đã chọn vào clipboard.
6. Cuối cùng, chúng ta xóa textarea ra khỏi DOM bằng removeChild(el).

• Copy text từ Textbox element

  // Copy text from Textbox element
  copyTextToClipboard(inputElement: any) {
    inputElement.select();
    document.execCommand('copy');
    inputElement.setSelectionRange(0, 0);
  }

Reference

• How can I copy text to clipboard with JavaScript?
• How to copy to the clipboard using JavaScript