تستخدم Google تكنولوجيا الذكاء الاصطناعي لترجمة المحتوى إلى لغتك المفضّلة، وقد تتضمّن بعض الأخطاء.

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

Joe Medley

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

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

استخدام Async Clipboard API

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

Browser Support

Source

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

جارٍ استخدام `document.execCommand()`

يؤدي استدعاء document.execCommand('copy') إلى عرض قيمة منطقية تشير إلى ما إذا تمت عملية النسخ بنجاح. يمكنك استدعاء هذا الأمر داخل إجراء تفاعلي من المستخدم، مثل معالج النقر. هذا الأسلوب له قيود مقارنةً بواجهة Async Clipboard API. لا تعمل الطريقة 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);
  });
}

محتوى إضافي للقراءة

إزالة حظر الوصول إلى الحافظة (الطريقة الحديثة)
أوامر القص والنسخ (الطريقة الكلاسيكية)

عرض توضيحي

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

طريقة نسخ النص تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.