Cách sao chép vào khay nhớ tạm bằng JavaScript

Tìm hiểu cách sao chép vào khay nhớ tạm bằng JavaScript bằng API khay nhớ tạm

Đôi khi tôi sử dụng các trang web cung cấp thứ gì đó mà tôi cần sao chép và dán vào đâu đó. Có thể là một khóa API. Có thể là một mã thông báo kích hoạt cho một ứng dụng tôi vừa mua.

Dù sao đi nữa, họ cho phép bạn nhấp vào bên trong hộp và văn bản bên trong hộp được sao chép vào khay nhớ tạm, vì vậy tôi có thể trực tiếp đi và dán nó vào đâu đó.

Làm cách nào chúng tôi có thể triển khai chức năng đó trong các trang web của mình? Sử dụng API khay nhớ tạm!

Có một cách khác để sao chép / dán hoạt động, bằng cách sử dụngdocument.execCommand()chức năng. Tôi sẽ không đề cập đến tùy chọn đó ở đây. Clipboard API có nghĩa là kế thừa của lệnh đó.

API Clipboard có sẵn trênnavigator.clipboardvật:

navigator.clipboard

API Clipboard tương đối gần đây và không phải tất cả các trình duyệt đều triển khai nó. Nó hoạt động trên Chrome, Edge hiện đại (dựa trên crôm), Firefox và Opera.

Bạn có thể kiểm tra sự tồn tại của đối tượng này để đảm bảo chức năng được triển khai:

if (!navigator.clipboard) {
  // Clipboard API not available
  return
}

Một điều bạn phải hiểu bây giờ là bạn không thể sao chép / dán từ khay nhớ tạm mà không có sự cho phép của người dùng.

Quyền sẽ khác nếu bạn đang đọc hoặc ghi vào khay nhớ tạm. Trong trường hợp bạn đang viết, tất cả những gì bạn cần là ý định của người dùng: bạn cần đặt hành động trên khay nhớ tạm để phản hồi lại hành động của người dùng, chẳng hạn như một lần nhấp.

Ghi vào khay nhớ tạm

Nói rằng bạn có mộtpphần tử trong trang HTML:

<p>Some text</p>

Bạn tạo trình xử lý sự kiện nhấp chuột trên đó và trước tiên bạn kiểm tra xem API Clipboard có sẵn không:

document.querySelector('p').addEventListener('click', async event => {
  if (!navigator.clipboard) {
    // Clipboard API not available
    return
  }
})

Bây giờ, chúng tôi muốn sao chép nội dung củapvào Clipboard. Chúng tôi làm như vậy bằng cách tra cứuinnerTextcủa phần tử, được xác định bởievent.target:

document.querySelector('p').addEventListener('click', async event => {
  if (!navigator.clipboard) {
    // Clipboard API not available
    return
  }
  const text = event.target.innerText
})

Tiếp theo, chúng tôi gọinavigator.clipboard.writeText(), gói nó trong một try / catch để xử lý bất kỳ lỗi nào có thể xảy ra.

Đây là mã đầy đủ của ví dụ:

document.querySelector('p').addEventListener('click', async event => {
  if (!navigator.clipboard) {
    // Clipboard API not available
    return
  }
  const text = event.target.innerText
  try {
    await navigator.clipboard.writeText(text)
    event.target.textContent = 'Copied to clipboard'
  } catch (err) {
    console.error('Failed to copy!', err)
  }
})

Ở đây bạn có thể xem và thử ví dụ trong Codepen

Xem bútVí dụ về Viết API Clipboardbởi Flavio Copes (@flaviocopes) trênCodePen.

Tech Wiki Online!