Tạo tính năng Copy khi click vào nội dung với Javascript và Clipboard API

Clipboard là một tính năng rất hay của windows giúp bạn có thể cắt dán nội dung từ một cửa sổ web này đến cửa sổ khác, một ứng dụng khác hoặc qua một máy khác (teamview, remote desktop…). Trong bài viết này mình sẽ hướng dẫn bạn code một tính năng Copy nội dung nào đó bằng cách click chuột sử dụng Javascript và Clipboard API có sẵn của trình duyệt, không cần plug-in hay thư viện Javascript nào khác.

Những API cần dùng đến

• document.execCommand()
• navigator.clipboard

// Operations/commands examples
  document.execCommand("copy");
  document.execCommand("cut");
  document.execCommand("paste");

Để tìm hiểu sâu hơn về execCommand() bạn có thể tham khảo tại MDN

Sao chép nội dung nào đó khi click vào.

Ví dụ mình có một đoạn mã ngắn như sau

   Nhân Châu KP là Admin của blog TienIch.xYz

Đầu tiên ta sẽ dùng Javascript để chọn phần nội dung cần thiết, bạn có thể linh động tùy biến lại.

const mySelect = document.querySelector("code");

Sau đó thêm một event(sự kiện) và phần tử đã chọn

// Nếu Clipboard API không hỗ trợ thì dừng luôn
mySelect.addEventListener("click", () => {
  if (!navigator.clipboard) {
    return;
  }
});

Nếu Clipboard API được hỗ trợ thì tiếp tục công việc, và ta có đoạn code hoàn chỉnh sẽ là.

const mySelect = document.querySelector("code");

mySelect.addEventListener("click", async (event) => {
  if (!navigator.clipboard) {
    return;
  }

  try {
    const text = event.target.innerText;
    await navigator.clipboard.writeText(text);
  } catch (error) {
    console.error("Không thể sao chép", error);
  }
});

Nếu trong quá trình copy mà trình duyệt yêu cầu truy cập quyền Clipboard bạn nhớ cho phép là được. Và bạn có thể xem bản demo của mình trong jsfiddle.net

Các trình duyệt hỗ trợ

Nó hỗ trợ hầu hết cho các trình duyệt dưới đây nhưng nếu bạn muốn sử dụng mạnh mẽ tính năng này hãy tham khảo thư viện clipboardjs.com nó được hỗ trợ mạnh mẽ hơn cả trên trình duyệt cũ và mới sau này, với file đóng gói dạng nén chỉ vỏn vẹn 3KB cũng không quá nặng nề.