معرفی Clipboard API

مقدمه

یکی از نیازهای رایج در وب اپلیکیشن‌ها، امکان کپی کردن متن در کلیپ‌بورد کاربر (مثلاً برای یک کد تخفیف یا یک لینک) و یا خواندن محتوا از آن است. در گذشته این کار با روش‌های غیر استاندارد و هک-مانند انجام می‌شد. اما Clipboard API مدرن، یک روش استاندارد، ایمن و مبتنی بر Promise برای تعامل با کلیپ‌بورد سیستم فراهم می‌کند.

این API از طریق پراپرتی clipboard روی شیء سراسری navigator در دسترس است (navigator.clipboard). به دلیل مسائل امنیتی، استفاده از این API نیازمند یک بستر امن (HTTPS) است و مرورگر هنگام تلاش برای دسترسی به کلیپ‌بورد، از کاربر درخواست مجوز می‌کند.

نوشتن متن در کلیپ‌بورد

برای نوشتن (کپی کردن) یک رشته متنی در کلیپ‌بورد، از متد writeText() استفاده می‌کنیم. این متد یک رشته به عنوان ورودی دریافت کرده و یک Promise برمی‌گرداند. اگر عملیات موفقیت‌آمیز باشد، Promise با مقدار undefined حل (resolve) می‌شود و در صورت بروز خطا (مثلاً اگر کاربر مجوز ندهد)، رد (reject) می‌شود.

JAVASCRIPT

const copyBtn = document.getElementById('copy-btn');
const textToCopy = 'This text will be copied to clipboard.';

copyBtn.addEventListener('click', async () => {
    try {
        await navigator.clipboard.writeText(textToCopy);
        console.log('Text copied successfully!');
        // You can also show a success message to the user
    } catch (err) {
        console.error('Failed to copy text: ', err);
    }
});

در این مثال، ما از یک تابع async به عنوان شنونده رویداد استفاده کرده‌ایم تا بتوانیم با await منتظر نتیجه Promise بمانیم. استفاده از بلاک try...catch برای مدیریت خطاهای احتمالی، مانند زمانی که دسترسی توسط کاربر رد می‌شود، ضروری است.

خواندن متن از کلیپ‌بورد

برای خواندن (paste کردن) متن از کلیپ‌بورد، از متد readText() استفاده می‌کنیم. این متد هیچ آرگومانی نمی‌گیرد و یک Promise برمی‌گرداند که در صورت موفقیت، با رشته متنی موجود در کلیپ‌بورد حل می‌شود.

از آنجایی که خواندن داده از کلیپ‌بورد از نظر امنیتی حساس‌تر است، مرورگرها تقریباً همیشه هنگام فراخوانی این متد برای اولین بار، یک پنجره درخواست مجوز به کاربر نمایش می‌دهند.

JAVASCRIPT

const pasteBtn = document.getElementById('paste-btn');
const outputArea = document.getElementById('output');

pasteBtn.addEventListener('click', async () => {
    try {
        const text = await navigator.clipboard.readText();
        outputArea.value = text;
        console.log('Text pasted from clipboard.');
    } catch (err) {
        console.error('Failed to read from clipboard: ', err);
    }
});

این کد نیز مشابه مثال قبلی از الگوی async/await و try...catch استفاده می‌کند. در صورت موفقیت، متنی که از کلیپ‌بورد خوانده شده، در یک عنصر <textarea> قرار می‌گیرد.

کار با داده‌های غیرمتنی

Clipboard API تنها به متن محدود نمی‌شود. متدهای عمومی‌تر write() و read() به شما اجازه می‌دهند تا داده‌های پیچیده‌تری مانند تصاویر را با استفاده از اشیاء Blob در کلیپ‌بورد بنویسید یا از آن بخوانید. بررسی کامل این متدها خارج از حوصله این درس است، اما خوب است بدانید که چنین قابلیتی برای کار با داده‌های باینری نیز وجود دارد.

در این درس با روش مدرن و ایمن برای تعامل با کلیپ‌بورد کاربر از طریق Clipboard API آشنا شدیم. دیدیم که چگونه می‌توانیم با استفاده از متدهای مبتنی بر `Promise` مانند writeText() و readText()، به راحتی متن را در کلیپ‌بورد کپی یا از آن بازیابی کنیم. این قابلیت برای بهبود تجربه کاربری بسیار مفید است. در درس بعدی، به سراغ موضوع «Cross-Context Messaging» خواهیم رفت و یاد می‌گیریم که چگونه بین پنجره‌های مختلف مرورگر یا بین یک صفحه و یک <iframe> به صورت ایمن پیام‌رسانی کنیم.