Bagaimanakah Saya Boleh Menyalin Teks dengan Cekap ke Papan Klip Menggunakan JavaScript?

Cara Menyalin ke Papan Klip dalam JavaScript

Dalam JavaScript, terdapat pelbagai cara untuk menyalin teks ke papan keratan, bergantung pada sokongan penyemak imbas.

1. API Papan Klip Async [navigator.clipboard.writeText]

Tersedia dalam Chrome 66, API Papan Klip Async menawarkan akses tak segerak ke papan keratan. Ia menggunakan Janji JavaScript, membenarkan pelaksanaan yang lancar tanpa gesaan pengguna yang mengganggu halaman. Selain itu, teks boleh terus disalin ke papan keratan daripada pembolehubah. Ambil perhatian bahawa ia hanya berfungsi pada halaman yang disampaikan melalui HTTPS.

2. document.execCommand('copy') (Ditamatkan)

Kaedah ini adalah segerak dan disokong oleh kebanyakan penyemak imbas sejak April 2015. Ia menghentikan pelaksanaan JavaScript sehingga proses selesai, yang berpotensi memaparkan gesaan keselamatan kepada pengguna . Teks disalin daripada DOM ke papan keratan.

Nota Pembangunan Am:

• Arahan papan keratan mungkin tidak berfungsi semasa menguji kod dalam konsol.
• Halaman mesti aktif (untuk API Papan Klip Async) atau memerlukan interaksi pengguna (untuk document.execCommand('copy')) untuk mengakses papan keratan.

Kaedah Sandaran:

Untuk memastikan keserasian merentas penyemak imbas, disyorkan untuk menggunakan kaedah sandaran bersama API Papan Klip Async. Berikut ialah contoh:

function fallbackCopyTextToClipboard(text) {
  // Create a textarea element and copy text to it
  const textArea = document.createElement("textarea");
  textArea.value = text;

  // Append the textarea to the body and set properties
  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  // Execute the copy command
  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Fallback: Copying text command was ' + msg);
  } catch (err) {
    console.error('Fallback: Oops, unable to copy', err);
  }

  // Remove the textarea from the body
  document.body.removeChild(textArea);
}

function copyTextToClipboard(text) {
  if (!navigator.clipboard) {
    fallbackCopyTextToClipboard(text);
    return;
  }
  navigator.clipboard.writeText(text).then(function() {
    console.log('Async: Copying to clipboard was successful!');
  }, function(err) {
    console.error('Async: Could not copy text: ', err);
  });
}

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyalin Teks dengan Cekap ke Papan Klip Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!