نحوه کپی کردن متن

جو مدلی
Joe Medley
GitHub

بریدن و چسباندن متن یکی از رایج‌ترین ویژگی‌های برنامه‌ها به طور کلی و به ویژه برنامه‌های دسکتاپ است. چگونه می‌توانم متن را در وب کپی کنم؟ یک روش قدیمی و یک روش جدید وجود دارد. و بستگی به این دارد که از کدام مرورگر استفاده می‌شود.

روش مدرن

استفاده از API کلیپ‌بورد ناهمگام

متد Clipboard.writeText() یک رشته می‌گیرد و یک Promise برمی‌گرداند که وقتی متن با موفقیت در کلیپ‌بورد نوشته شود، اجرا می‌شود. Clipboard.writeText() فقط می‌تواند از شیء window که فوکوس دارد استفاده شود.

Browser Support

  • کروم: ۶۶.
  • لبه: ۷۹.
  • فایرفاکس: ۶۳.
  • سافاری: ۱۳.۱.

Source

روش کلاسیک

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

فراخوانی document.execCommand('copy') یک مقدار بولی برمی‌گرداند که نشان می‌دهد آیا کپی موفقیت‌آمیز بوده است یا خیر. این دستور را درون یک ژست کاربر مانند یک کنترل‌کننده کلیک فراخوانی کنید. این رویکرد در مقایسه با API کلیپ‌بورد Async محدودیت‌هایی دارد. متد execCommand() فقط با عناصر DOM کار می‌کند. از آنجا که این متد همزمان است، کپی کردن حجم زیادی از داده‌ها، به ویژه داده‌هایی که باید به نوعی تبدیل یا پاکسازی شوند، می‌تواند صفحه را مسدود کند.

Browser Support

  • کروم: ۱.
  • لبه: ۱۲.
  • فایرفاکس: ۶۹.
  • سافاری: ۱.۳.

Source

بهبود تدریجی 

const copyButton = document.querySelector('#copyButton');
const out = document.querySelector('#out');

if ('clipboard' in navigator) {
  copyButton.addEventListener('click', () => {
    navigator.clipboard.writeText(out.value)
    .then(() => {
      console.log('Text copied');
    })
    .catch((err) => console.error(err.name, err.message));
  });
} else {
  copyButton.addEventListener('click', () => {
    const textArea = document.createElement('textarea');
    textArea.value = out.value;
    textArea.style.opacity = 0;
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    try {
      const success = document.execCommand('copy');
      console.log(`Text copy was ${success ? 'successful' : 'unsuccessful'}.`);
    } catch (err) {
      console.error(err.name, err.message);
    }
    document.body.removeChild(textArea);
  });
}

مطالعه بیشتر

نسخه آزمایشی

اچ‌تی‌ام‌ال 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="icon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
    />
    <title>How to copy text</title>
  </head>
  <body>
    <h1>How to copy text</h1>
    <textarea rows="3">
Some sample text for you to copy. Feel free to edit this.</textarea
    >
    <button type="button">Copy</button>
  </body>
</html>

سی اس اس 


        :root {
  color-scheme: dark light;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 1rem;
  font-family: system-ui, sans-serif;
}

button {
  display: block;
}

جی‌اس 


        const textarea = document.querySelector('textarea');
const button = document.querySelector('button');

button.addEventListener('click', async () => {
  try {
    await navigator.clipboard.writeText(textarea.value);
  } catch (err) {
    console.error(err.name, err.message);
  }
});