HomeLập trìnhJavaScriptCách sao chép...

Cách sao chép văn bản vào Clipboard bằng JavaScript


Khi bạn đang xây dựng các trang web và ứng dụng nâng cao, đôi khi bạn sẽ muốn thêm tính năng sao chép. Điều này cho phép người dùng của bạn chỉ cần nhấp vào nút hoặc biểu tượng để sao chép văn bản thay vì tô sáng văn bản và nhấp vào một vài nút trên bàn phím.

Tính năng này chủ yếu được sử dụng khi ai đó cần sao chép mã kích hoạt, khóa khôi phục, đoạn mã, v.v. Bạn cũng có thể thêm các chức năng như cảnh báo hoặc văn bản trên màn hình (có thể là một phương thức) để thông báo cho người dùng rằng văn bản đã được sao chép vào khay nhớ tạm của họ.

Trước đây bạn sẽ xử lý việc này với document.execCommand() lệnh, nhưng điều đó đã được khấu hao. Giờ đây, bạn có thể sử dụng API Clipboard, cho phép bạn phản hồi các lệnh của bảng tạm (cắt, sao chép và dán) cũng như đọc không đồng bộ từ và viết thư cho khay nhớ tạm của hệ thống.

Trong bài viết này, bạn sẽ học cách ghi (sao chép) văn bản và hình ảnh vào khay nhớ tạm bằng API Clipboard.

Trong trường hợp bạn đang vội, đây là mã:

<p id="myText">Hello World</p>
<button class="btn" onclick="copyContent()">Copy!</button>

<script>
  let text = document.getElementById('myText').innerHTML;
  const copyContent = async () => {
    try {
      await navigator.clipboard.writeText(text);
      console.log('Content copied to clipboard');
    } catch (err) {
      console.error('Failed to copy: ', err);
    }
  }
</script>

Nếu bạn không vội, hãy cùng tìm hiểu thêm về Clipboard API và xem cách thức hoạt động của API này với một dự án demo.

Đọc thêm  Đa luồng, SQLite, Mô-đun gốc và các điểm đau phổ biến khác

Cách kiểm tra quyền của trình duyệt

Điều quan trọng cần biết là API Clipboard chỉ được hỗ trợ cho các trang được cung cấp qua HTTPS. Bạn cũng nên kiểm tra các quyền của trình duyệt trước khi thử ghi vào khay nhớ tạm để xác minh xem bạn có quyền ghi hay không. Bạn có thể làm điều này với navigator.permissions truy vấn:

navigator.permissions.query({ name: "write-on-clipboard" }).then((result) => {
  if (result.state == "granted" || result.state == "prompt") {
    alert("Write access granted!");
  }
});

Cách sao chép văn bản vào Clipboard

Để sao chép văn bản với cái mới API bảng nhớ tạmbạn sẽ sử dụng không đồng bộ writeText() phương pháp. Phương thức này chỉ chấp nhận một tham số – văn bản cần sao chép vào khay nhớ tạm của bạn. Đây có thể là một chuỗi, một biến giữ mẫu theo nghĩa đen và các chuỗi khác hoặc một biến được sử dụng để giữ một chuỗi.

Vì phương thức này không đồng bộ nên nó trả về một lời hứa. Lời hứa này được giải quyết nếu khay nhớ tạm đã được cập nhật thành công và bị từ chối nếu không:

navigator.clipboard.writeText("This is the text to be copied").then(() => {
  console.log('Content copied to clipboard');
  /* Resolved - text copied to clipboard successfully */
},() => {
  console.error('Failed to copy');
  /* Rejected - text failed to copy to the clipboard */
});

Bạn cũng có thể sử dụng async/await cùng với try/catch:

async function copyContent() {
  try {
    await navigator.clipboard.writeText('This is the text to be copied');
    console.log('Content copied to clipboard');
    /* Resolved - text copied to clipboard successfully */
  } catch (err) {
    console.error('Failed to copy: ', err);
    /* Rejected - text failed to copy to the clipboard */
  }
}

Sao chép văn bản vào ví dụ clipboard

Đây là một bản demo cho thấy nó hoạt động như thế nào bằng một ví dụ thực tế. Trong ví dụ này, chúng tôi đang tìm nạp báo giá từ API báo giá công khai. Sau đó, khi bạn nhấp vào biểu tượng sao chép, trích dẫn và tác giả của nó sẽ được sao chép, cho thấy rằng bạn có thể điều chỉnh những gì bạn sao chép vào writeText() phương pháp.

Đọc thêm  find() so với filter() trong JavaScript – Sự khác biệt được giải thích bằng các ví dụ

Xem Pen copy text JS của Olawanle Joel (@olawanlejoel) trên CodePen.

kết thúc

Trong bài viết này, bạn đã học cách sao chép văn bản vào khay nhớ tạm bằng JavaScript bằng cách sử dụng API Clipboard mà không cần phải suy nghĩ thấu đáo hay cài đặt bất kỳ thư viện JavaScript nào.

Hãy mã hóa vui vẻ!



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status