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

در این آموزش، نحوه افزودن دکمه‌ای برای کپی کردن متن به کلیپ‌بورد در وب‌سایت با استفاده از جاوااسکریپت را یاد خواهید گرفت.

در این آموزش از وبلاگ آزادی، قصد داریم نحوه ایجاد دکمه‌ای برای کپی کردن متن به کلیپ‌بورد را به شما نشان دهیم. این قابلیت می‌تواند برای کاربران شما بسیار مفید باشد، به‌ویژه زمانی که نیاز دارند سریعاً متنی را کپی کنند.

روش اول: استفاده از document.execCommand() (روش سنتی)

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


  <textarea id="textToCopy">متنی که می‌خواهید کپی کنید</textarea>
<button>کپی متن</button>


<script>
function copyText() {
  var textArea = document.getElementById('textToCopy');
  textArea.select();
  document.execCommand('copy');
  alert('متن کپی شد!');
}
</script>

روش دوم: استفاده از API جدید navigator.clipboard (روش مدرن)

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


  <button>کپی متن</button>

<script>
function copyToClipboard() {
  const text = 'این متنی است که کپی خواهد شد';
  navigator.clipboard.writeText(text).then(() => {
    alert('متن با موفقیت کپی شد!');
  }).catch(err => {
    console.error('مشکلی پیش آمد:', err);
  });
}
</script>

روش سوم: کپی متن از یک ورودی یا المان دیگر

گاهی ممکن است بخواهید متن موجود در یک div یا input را کپی کنید. در این صورت، می‌توانید از این روش استفاده کنید:


  <div id="textDiv">این یک متن نمونه است.</div>
<button>کپی متن</button>

<script>
function copyDivText() {
  const text = document.getElementById('textDiv').innerText;
  navigator.clipboard.writeText(text).then(() => {
    alert('متن کپی شد!');
  }).catch(err => {
    console.error('خطا در کپی کردن متن:', err);
  });
}
</script>

نکات پایانی

روش navigator.clipboard تنها در صفحات دارای HTTPS کار می‌کند.
برای تجربه بهتر، یک پیام تأیید به کاربر نمایش دهید تا از کپی شدن متن مطمئن شود.
مرورگرهای بسیار قدیمی ممکن است از navigator.clipboard پشتیبانی نکنند. در این صورت از روش اول استفاده کنید.

مثال کپی رمز

نحوه عملکرد:
رمز عبور در یک input با خاصیت readonly قرار دارد تا کاربر نتواند آن را تغییر دهد.
دکمه "کپی رمز" با کلیک، متن موجود در فیلد را کپی می‌کند.
از API مدرن navigator.clipboard.writeText() برای کپی کردن استفاده شده است.
پیام "رمز عبور کپی شد!" برای تأیید به کاربر نمایش داده می‌شود.


<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>کپی کردن رمز</title>
</head>
<body>
  <div>
    <label for="password">رمز عبور شما:</label>
    <input type="text" id="password" value="123456789" readonly>
    <button onclick="copyPassword()">کپی رمز</button>
  </div>

  <script>
    function copyPassword() {
      const passwordField = document.getElementById('password');
      passwordField.select();
      navigator.clipboard.writeText(passwordField.value)
        .then(() => {
          alert('رمز عبور کپی شد!');
        })
        .catch(err => {
          console.error('خطایی رخ داد:', err);
        });
    }
  </script>
</body>
</html>

مثال کپی کد

توضیحات و نحوه عملکرد:

انتخاب متن: ابتدا از متد select() برای انتخاب تمام متن درون یک textarea یا فیلد ورودی استفاده می‌شود.
کپی کردن: سپس از متد document.execCommand('copy') برای کپی کردن متن انتخاب‌شده به کلیپ‌بورد استفاده می‌شود. این متد در صورتی که عملیات موفقیت‌آمیز باشد، true را برمی‌گرداند.
مدیریت خطا: در صورتی که مشکلی در کپی کردن پیش بیاید (مثل عدم پشتیبانی از execCommand در مرورگر)، خطای مربوطه در کنسول چاپ می‌شود.

<div style="margin: 20px; padding: 10px; border: 1px solid #ddd; width: 300px; text-align: center;">
  <label for="password" style="display: block; margin-bottom: 10px; font-size: 16px;">کد برای کپی کردن:</label>
  <textarea 
    id="code" 
    rows="5" 
    readonly 
    style="width: 80%; padding: 8px; text-align: left; font-size: 14px; border: 1px solid #ccc; border-radius: 4px;">
    const a = 10;
    console.log(a);
  </textarea>
  <button 
    onclick="copyCode()" 
    style="padding: 8px 16px; background-color: #28A745; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;">
    کپی کد
  </button>
</div>

<script>
  function copyCode() {
    const codeField = document.getElementById('code');
    codeField.select(); // انتخاب تمام متن در textarea
    try {
      const successful = document.execCommand('copy'); // تلاش برای کپی کردن
      if (successful) {
        alert('کد کپی شد!');
      } else {
        alert('کپی کردن کد موفقیت‌آمیز نبود!');
      }
    } catch (err) {
      console.error('خطا در کپی کردن کد:', err);
    }
  }
</script>

امیدواریم این آموزش برای شما مفید بوده باشد. اگر سؤالی داشتید، در بخش نظرات مطرح کنید. 😊