تطبيق وظيفة النسخ إلى الحافظة باستخدام JavaScript و HTML

📚 مراجعة سريعة: هذا التطبيق العملي مبني على مفهوم برمجي أساسي. راجع الدرس النظري من هنا أولاً.


تطبيق وظيفة النسخ إلى الحافظة باستخدام JavaScript و HTML

الآن بعد أن فهمنا الجوانب النظرية لواجهة برمجة تطبيقات الحافظة (Clipboard API) وكيفية عملها، حان الوقت لتطبيق هذه المعرفة عمليًا لإنشاء وظيفة "النسخ إلى الحافظة" سهلة الاستخدام في تطبيقات الويب الخاصة بك.

المتطلبات الأساسية

سنحتاج إلى ملف HTML بسيط وملف JavaScript لتنظيم الكود الخاص بنا.

1. هيكل HTML الأساسي

لنبدأ بإنشاء ملف index.html. سنحتاج إلى زر لتشغيل عملية النسخ وعنصر لعرض النص الذي نريد نسخه.

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تطبيق النسخ إلى الحافظة</title>
    <style>
        body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; background-color: #f4f4f4; }
        .container { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); text-align: center; }
        #textToCopy { width: 300px; padding: 10px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; }
        #copyButton { background-color: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
        #copyButton:hover { background-color: #0056b3; }
        #feedbackMessage { margin-top: 15px; color: green; font-weight: bold; }
    </style>
</head>
<body>
    <div class="container">
        <h1>النسخ إلى الحافظة</h1>
        <textarea id="textToCopy" rows="4">هذا هو النص الذي سيتم نسخه إلى الحافظة.</textarea>
        <button id="copyButton">انسخ النص</button>
        <p id="feedbackMessage"></p>
    </div>

    <script src="script.js"></script>
</body>
</html>

2. دالة النسخ إلى الحافظة في JavaScript

الآن، لنقم بإنشاء ملف script.js وإضافة الدالة copyToClipboard التي درسناها سابقًا. سنقوم بتعديلها قليلاً لتتفاعل مع عناصر HTML.

const copyToClipboard = async (text) => {
    try {
        await navigator.clipboard.writeText(text);
        return { success: true, message: 'تم نسخ النص بنجاح!' };
    } catch (err) {
        console.error('فشل في نسخ النص: ', err);
        return { success: false, message: 'فشل في النسخ: ' + err.message };
    }
};

// الحصول على العناصر من DOM
const textToCopyElement = document.getElementById('textToCopy');
const copyButton = document.getElementById('copyButton');
const feedbackMessage = document.getElementById('feedbackMessage');

// إضافة مستمع حدث عند النقر على الزر
copyButton.addEventListener('click', async () => {
    const text = textToCopyElement.value; // الحصول على النص من مربع النص
    const result = await copyToClipboard(text);

    // عرض رسالة التغذية الراجعة للمستخدم
    feedbackMessage.textContent = result.message;
    feedbackMessage.style.color = result.success ? 'green' : 'red';

    // إخفاء الرسالة بعد بضع ثوانٍ
    setTimeout(() => {
        feedbackMessage.textContent = '';
    }, 3000);
});

3. شرح الكود

  • قمنا بتعديل دالة copyToClipboard لتعيد كائنًا يوضح ما إذا كانت العملية ناجحة ورسالة مناسبة.
  • نحصل على مرجع لعناصر HTML: مربع النص (textToCopy)، الزر (copyButton)، وعنصر الفقرة لرسالة التغذية الراجعة (feedbackMessage).
  • نضيف مستمع حدث (click event listener) إلى copyButton. عندما يتم النقر على الزر:
    • نحصل على القيمة الحالية من مربع النص textToCopy.
    • نستدعي الدالة copyToClipboard مع هذا النص وننتظر نتيجتها.
    • نعرض رسالة النجاح أو الخطأ في العنصر feedbackMessage ونقوم بتغيير لونها بناءً على النتيجة.
    • نستخدم setTimeout لمسح رسالة التغذية الراجعة تلقائيًا بعد 3 ثوانٍ، مما يوفر تجربة مستخدم أنظف.

تجربة التطبيق

لحفظ الملفين (index.html و script.js) في نفس المجلد. ثم افتح ملف index.html في متصفحك. اكتب أي نص في مربع النص، ثم انقر على زر "انسخ النص". ستلاحظ أن النص يتم نسخه إلى حافظتك، وستظهر رسالة تأكيد مؤقتة على الشاشة.

تذكر أن هذا سيعمل فقط إذا تم تقديم صفحتك عبر HTTPS (أو على localhost لأغراض التطوير).