نحوه کپی کردن به کلیپ‌بورد در جاوا اسکریپت

mohsen•5 ماه قبل•4 ماه قبل
ارسال شده در
javascript

1. استفاده از Async Clipboard API

استفاده از Async Clipboard API یکی از به‌روزترین و ساده‌ترین روش‌ها برای کپی کردن به کلیپ‌بورد است و در اکثر نسخه جدید مرورگرها (شامل Chrome 66 به بالا) پشتیبانی می‌شود.

      navigator.clipboard.writeText("متن نمونه").then(function() {
  console.log('کپی متن به کلیپ‌بورد با موفقیت انجام شد!');
}).catch(function(err) {
  console.error('نتوانستیم متن را کپی کنیم: ', err);
});

نکته: برای استفاده از این ای پ آی، حتمن باید صفحه مورد نظر با https باز شده باشد در غیر اینصورت با خطای زیر مواجه می شوید:

      Uncaught TypeError: Cannot read properties of undefined (reading 'writeText')

برای جلوگیری از خطا می توانید از دستور window.isSecureContext استفاده کنید.

2. استفاده از document.execCommand('copy')

این روش ممکن است کمی پیچیده‌تر به نظر برسد، اما در بسیاری از مرورگرها پشتیبانی می شود. توجه داشته باشید که این روش تنها می‌تواند در نتیجه یک عمل کاربر (مانند کلیک) اجرا شود:

      function copyTextToClipboard(text) {
  var textarea = document.createElement("textarea");
  textarea.value = text;
  textarea.style.position = 'fixed'; // جلوگیری از اسکرول به پایین صفحه
  document.body.appendChild(textarea);
  textarea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'موفقیت‌آمیز' : 'ناموفق';
    console.log('عملیات کپی متن: ' + msg);
  } catch (err) {
    console.error('عملیات کپی انجام نشد', err);
  }

  document.body.removeChild(textarea);
}

4. ترکیب دو حالت قبل

      function copyTextToClipboard(text) {
  if (navigator.clipboard && window.isSecureContext) {
    navigator.clipboard.writeText("متن نمونه").then(function() {
      console.log('کپی متن به کلیپ‌بورد با موفقیت انجام شد!');
    }).catch(function(err) {
      console.error('نتوانستیم متن را کپی کنیم: ', err);
    });
    return;
  }
  var textarea = document.createElement("textarea");
  textarea.value = text;
  textarea.style.position = 'fixed'; // جلوگیری از اسکرول به پایین صفحه
  document.body.appendChild(textarea);
  textarea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'موفقیت‌آمیز' : 'ناموفق';
    console.log('عملیات کپی متن: ' + msg);
  } catch (err) {
    console.error('عملیات کپی انجام نشد', err);
  }

  document.body.removeChild(textarea);
}

3. استفاده از روش‌های قدیمی‌تر

در صورتی که روش‌های جدید پشتیبانی نشوند، می‌توانید از یک راه‌حل ساده‌تر استفاده کنید که کاربر را مجبور به کپی دستی می‌کند:

      function copyToClipboard(text) {
  window.prompt("برای کپی به کلیپ‌بورد: Ctrl+C و Enter را بزنید", text);
}
رای
0
ارسال نظر
مرتب سازی:
اولین نفری باشید که نظر می دهید!