نسخ إلى الحافظة في JavaScript: 3 طرق عملية

ثلاث طرق لنسخ النص إلى الحافظة في JavaScript: من القديمة إلى الحديثة

هل تساءلت يومًا كيف تعمل سحر زر "نسخ"؟ تضغط عليه — ويتم نسخ الرابط أو الكود أو الرمز الترويجي إلى الحافظة. بدون وميض، بدون تمرير، بدون حركات إضافية. هذه المهمة التي تبدو بسيطة هي واحدة من أكثر الأسئلة شيوعًا على Stack Overflow. وليس من دون سبب: تنفيذ النسخ إلى الحافظة في JavaScript يخفي في طياته مطبات خفية، واختلافات بين المتصفحات، وثلاثة عصور كاملة من تطور الويب.

في هذه المقالة، سنستعرض جميع طرق نسخ النص إلى الحافظة باستخدام JavaScript: من الطريقة القديمة الجيدة (والتي أوشكت على الموت) document.execCommand إلى الطريقة الحديثة غير المتزامنة navigator.clipboard. ستتعلم ليس فقط كيفية نسخ النص، ولكن أيضًا كيفية القيام بذلك بأمان، وبشكل أنيق، مع دعم المتصفحات القديمة. هيا بنا!

لماذا النسخ إلى الحافظة ليس "أمرًا بسيطًا"

للوهلة الأولى يبدو: ما الصعوبة في ذلك؟ تأخذ النص وترسله إلى الحافظة. لكن المتصفحات مصابة بجنون الارتياب. إنها لا تريد أن يتمكن أي سكريبت على الموقع من القراءة أو الكتابة في الحافظة دون علمك. تخيل: تفتح موقعًا، ويقوم في الخلفية باستبدال كلمة المرور المنسوخة بـ "أرسل بيتكوين إلي". أمر مرعب، أليس كذلك؟

لذلك، لدى JavaScript قواعد صارمة: النسخ ممكن فقط عند وجود إجراء نشط من المستخدم (نقرة، ضغطة مفتاح). وحتى مع هذا الشرط — لا تعمل جميع واجهات API بنفس الطريقة. دعنا نفهم الأمر.

الطريقة رقم 1: الكلاسيكية — document.execCommand('copy')

كيف تعمل

في الماضي، في عصر الديناصورات (تقريبًا قبل عام 2020)، كانت الطريقة الوحيدة لنسخ النص إلى الحافظة هي الحيلة باستخدام execCommand. الفكرة بسيطة:

\n
• تنشئ عنصرًا مؤقتًا textarea أو input.
\n
• تضع فيه النص المطلوب.
\n
• تحدده (عبر select()).
\n
• تستدعي document.execCommand('copy').
\n
• تحذف العنصر المؤقت.
\n

إليك كيف يبدو ذلك في الكود:

function copyToClipboardLegacy(text) {\n    // إنشاء عنصر مؤقت\n    const textarea = document.createElement('textarea');\n    textarea.value = text;\n    // جعله غير مرئي\n    textarea.style.position = 'fixed';\n    textarea.style.opacity = '0';\n    document.body.appendChild(textarea);\n    // تحديد النص\n    textarea.select();\n    textarea.setSelectionRange(0, 99999); // للأجهزة المحمولة\n    // نسخ\n    try {\n        const successful = document.execCommand('copy');\n        if (successful) {\n            console.log('تم نسخ النص!');\n        } else {\n            console.error('فشلت عملية النسخ');\n        }\n    } catch (err) {\n        console.error('خطأ في النسخ:', err);\n    }\n    // التنظيف\n    document.body.removeChild(textarea);\n}

الإيجابيات والسلبيات

الإيجابيات: يعمل حتى في Internet Explorer 9. لا يتطلب أذونات.

السلبيات: يعتبر قديمًا (مهمل). متزامن — يمنع الخيط الرئيسي أثناء النسخ. غير مناسب لنسخ كميات كبيرة من البيانات. والأهم من ذلك، في المتصفحات الحديثة قد يتم إزالته في أي لحظة.

نصيحة: إذا كنت تكتب مشروعًا جديدًا — لا تستخدم execCommand. ولكن لدعم المتصفحات القديمة جدًا (IE11، Edge القديم) هذا هو الخيار الوحيد.

الطريقة رقم 2: الحديثة — Clipboard API (navigator.clipboard)

كيف تعمل

لقد حلت واجهة Clipboard API محل الحلول المؤقتة — غير متزامنة وآمنة ومرنة. تعيش في الكائن navigator.clipboard ولا تستطيع الكتابة فحسب، بل والقراءة من الحافظة أيضًا (بإذن المستخدم).

للنسخ، يتم استخدام الطريقة writeText():

async function copyToClipboardModern(text) {\n    try {\n        await navigator.clipboard.writeText(text);\n        console