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

جو مدلی
Joe Medley
GitHub

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

روش مدرن

با استفاده از Async Clipboard API

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

پشتیبانی مرورگر

  • 66
  • 79
  • 63
  • 13.1

منبع

روش کلاسیک

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

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

پشتیبانی مرورگر

  • 1
  • 12
  • 1
  • 1.3

منبع

افزایش پیشرونده

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);
  });
}

بیشتر خواندن

نسخه ی نمایشی

HTML

<!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>

CSS


        :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;
}

JS


        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);
  }
});