طريقة نسخ النص

جو ميدلي
جو ميدلي
Twitter GitHub

يعد قص النص ولصقه واحدة من أكثر ميزات التطبيقات شيوعًا في التطبيقات بشكل عام وتطبيقات سطح المكتب بشكل خاص. كيف أنسخ النص على الويب؟ هناك طريقة قديمة وطريقة جديدة. ويعتمد ذلك على المتصفح الذي يتم استخدامه.

الطريقة الحديثة

استخدام Async Clipboard API

تستخدم الطريقة Clipboard.writeText() سلسلة وتعرض "وعدًا" يتم عرضه عند كتابة النص في الحافظة. لا يمكن استخدام "Clipboard.writeText()" إلا من كائن window الذي يتم التركيز عليه.

التوافق مع المتصفح

  • 66
  • 79
  • 63
  • 13

المصدر

الطريقة الكلاسيكية

جارٍ استخدام 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);
  }
});