چگونه یک Copy-to-Clipboard حرفه‌ای برای کدهای سایت بسازیم؟

رفیق برنامه‌نویس، تا حالا شده یه کدی رو تو سایتت گذاشتی و دلت خواسته کاربرات با یه کلیک اونو کپی کنن؟ حتماً شده! دیگه اون دوران که کاربر باید با موس کد رو سلکت می‌کرد و Ctrl+C می‌زد تموم شده. امروز قراره با هم یاد بگیریم چطور یه دکمه کپی به کلیپ‌بورد فوق‌العاده حرفه‌ای و کاربردی برای کدهای سایتت بسازی. این قابلیت نه تنها تجربه کاربری رو متحول می‌کنه، بلکه به سایتت یه جلوه مدرن و حرفه‌ای می‌ده. اگه دنبال ابزارهای خفن دیگه هم هستی، یه سر به فروشگاه ابزارها بزن، شاید همون چیزی که می‌خواستی اونجا منتظرته!

اگه در هر مرحله‌ای سوالی داشتی یا نیاز به راهنمایی بیشتر پیدا کردی، کافیه با تیم فنی ما تماس بگیری: 09202232789.

چرا اصلا به این قابلیت نیاز داریم؟ (یه نگاه به تجربه کاربری)

تصور کن یه کاربر وارد سایتت شده، دنبال یه snippet کد (مثل یه دستور Git یا یه بخش CSS) می‌گرده. کد رو پیدا می‌کنه، اما برای کپی کردنش باید:

• با دقت موس رو از اول تا آخر کد بکشه (که خیلی وقت‌ها سخته و اشتباه پیش میاد).
• بعد Ctrl+C یا Command+C بزنه.
• حالا بره تو IDE یا ترمینالش و Ctrl+V کنه.

این فرایند ممکنه برای یه خط کد آسون باشه، اما برای یه بلوک کد چندخطی یا برای کاربرایی که با موبایل سایت رو می‌بینن، می‌تونه کابوس باشه. یه دکمه “کپی” کنار کد، این دردسر رو کاملاً از بین می‌بره. کاربر با یه کلیک، کد رو تو کلیپ‌بوردش داره و آماده استفاده‌ست. این یعنی رضایت بیشتر کاربر، کاهش اصطکاک و در نهایت، یه تجربه کاربری عالی که باعث میشه کاربر بازم به سایتت سر بزنه.

از دید خودمون، یعنی برنامه‌نویس‌ها، داشتن یه دکمه کپی روی صفحه اصلی یا صفحات آموزشیمون، یه جورایی نشون‌دهنده اینه که به جزئیات اهمیت می‌دیم و کار کاربر رو راحت می‌کنیم. این به افزایش اعتبار و مرجعیت موضوعی سایتت هم کمک زیادی می‌کنه.

روش‌های ساخت دکمه کپی به کلیپ‌بورد

در طول سال‌ها، روش‌های مختلفی برای پیاده‌سازی این قابلیت وجود داشته. بعضی‌ها قدیمی‌تر و بعضی‌ها مدرن‌تر و امن‌تر هستن. بیاید یه نگاهی بهشون بندازیم:

روش اول: استفاده از Native API مرورگر (document.execCommand)

این روش قدیمی‌ترین و شاید شناخته‌شده‌ترین راه برای دسترسی به کلیپ‌بورد مرورگر باشه. با استفاده از `document.execCommand(‘copy’)` می‌تونستیم محتوای انتخاب شده رو کپی کنیم.

<textarea id="code-to-copy-legacy" style="position:absolute; left:-9999px;">این یک کد نمونه برای روش قدیمی است.</textarea>
<button onclick="copyToClipboardLegacy()">کپی (قدیمی)</button>

<script>
function copyToClipboardLegacy() {
    const codeElement = document.getElementById('code-to-copy-legacy');
    codeElement.select();
    document.execCommand('copy');
    alert('کد کپی شد! (روش قدیمی)');
}
</script>
    

اما یه نکته مهم: `document.execCommand()` در حال حاضر منسوخ شده (deprecated) و استفاده ازش توصیه نمی‌شه. دلیلش هم محدودیت‌ها و مشکلات امنیتیشه. بنابراین، بریم سراغ گزینه بهتر!

روش دوم: استفاده از Clipboard API مدرن (navigator.clipboard)

این روش جدیدترین و استانداردترین راه برای تعامل با کلیپ‌بورد مرورگره. `navigator.clipboard` یه API مدرنه که قابلیت‌های بیشتری رو با امنیت بالاتر فراهم می‌کنه. این API بر پایه Promise کار می‌کنه، یعنی فرایندهای کپی و پیست به صورت ناهمگام (async) انجام می‌شن و نیاز به اجازه کاربر (user permission) داره.

حالا که بهترین راه رو پیدا کردیم، بیاید ببینیم چطور می‌تونیم اینو پیاده‌سازی کنیم.

روش سوم: کتابخانه‌های جانبی (مثلاً Clipboard.js)

برای بعضی از پروژه‌ها، به خصوص وقتی نیاز به پشتیبانی از مرورگرهای قدیمی‌تر یا قابلیت‌های پیشرفته‌تر داری، استفاده از کتابخانه‌های جانبی مثل Clipboard.js می‌تونه گزینه خوبی باشه. این کتابخانه‌ها پیچیدگی‌های مربوط به Cross-browser compatibility رو برایت حل می‌کنن و یه API ساده‌تر رو ارائه می‌دن.

اما اگه می‌خوای همه چیز رو خودت کنترل کنی و یه راهکار سبک (lightweight) داشته باشی، Clipboard API بومی مرورگر بهترین گزینه‌ست.

پیاده‌سازی گام به گام با Clipboard API (پیشنهاد حرفه‌ای‌ها)

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

قدم ۱: آماده‌سازی HTML

اول از همه، یه ساختار HTML ساده نیاز داریم که شامل یه بلوک کد (مثلاً یه `pre` با یه `code` داخلش) و یه دکمه برای کپی باشه. ما از یه `div` با کلاس `code-block` استفاده می‌کنیم که هم کد رو توش قرار بدیم و هم دکمه رو.

<div class="code-block">
    <pre><code id="myCodeSnippet">
function sayHello() {
    console.log("Hello, Fa-Tools Community!");
}
sayHello();
    </code></pre>
    <button class="copy-btn" data-target-id="myCodeSnippet">
        <span class="icon">📋</span> <span class="text">کپی کد</span>
    </button>
    <span class="copy-feedback" aria-live="polite"></span>
</div>

<div class="code-block">
    <pre><code id="anotherCodeSnippet">
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc; /* یه غلط املایی برای نمونه */
}
    </code></pre>
    <button class="copy-btn" data-target-id="anotherCodeSnippet">
        <span class="icon">📋</span> <span class="text">کپی کد</span>
    </button>
    <span class="copy-feedback" aria-live="polite"></span>
</div>
    

توضیحات:

• `code-block`: یه wrapper برای کل بخش کد و دکمه کپی.
• `pre` و `code`: بهترین تگ‌ها برای نمایش کدها. حواست باشه `id` یکتا برای تگ `code` تعیین کنی.
• `copy-btn`: دکمه کپی کردن. `data-target-id` مشخص می‌کنه که این دکمه مربوط به کد با چه `id` هست.
• `copy-feedback`: یه تگ `span` خالی برای نمایش فیدبک بصری به کاربر (مثلاً “کپی شد!”). `aria-live=”polite”` هم برای دسترسی‌پذیری عالیه، تا screen reader ها پیام رو بخونن.

قدم ۲: استایل‌دهی (CSS) برای دکمه و کد (رسپانسیو و زیبا)

حالا وقتشه که به کد و دکمه‌مون یه ظاهر شیک و کاربرپسند بدیم. این CSS رو می‌تونی به فایل استایلت اضافه کنی:

.code-block {
    position: relative;
    background-color: #2d2d2d; /* پس‌زمینه تیره برای کد */
    color: #f8f8f2;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 25px;
    overflow-x: auto; /* برای اسکرول افقی در موبایل */
}

.code-block pre {
    margin: 0;
    padding-top: 40px; /* برای فضای دکمه کپی */
    font-size: 15px;
    line-height: 1.6;
    direction: ltr;
    text-align: left;
}

.code-block .copy-btn {
    position: absolute;
    top: 10px;
    right: 10px; /* موقعیت دکمه در بالا سمت راست */
    background-color: #3498db;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background-color 0.3s ease;
}

.code-block .copy-btn:hover {
    background-color: #2980b9;
}

.code-block .copy-feedback {
    position: absolute;
    top: 10px;
    left: 10px; /* موقعیت فیدبک در بالا سمت چپ */
    background-color: #2ecc71;
    color: white;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 13px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.code-block .copy-feedback.show {
    opacity: 1;
    visibility: visible;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .code-block pre {
        font-size: 14px;
    }
    .code-block .copy-btn {
        padding: 6px 10px;
        font-size: 13px;
    }
    .code-block .copy-btn .text {
        display: none; /* مخفی کردن متن "کپی کد" در موبایل برای فضای بیشتر */
    }
    .code-block .copy-feedback {
        padding: 6px 10px;
        font-size: 12px;
    }
}
    

نکات مهم در CSS:

• `position: relative` روی `code-block` و `position: absolute` روی `copy-btn` و `copy-feedback`، بهمون کمک می‌کنه دکمه‌ها و پیام‌ها رو هر جای بلوک کد که خواستیم قرار بدیم.
• `overflow-x: auto` روی `pre` برای حالت رسپانسیو خیلی مهمه. این کار باعث میشه اگه خط کد خیلی طولانی بود، تو موبایل یه اسکرول افقی داشته باشیم و کد از کادر خارج نشه.
• انیمیشن ساده با `transition` برای دکمه و فیدبک، یه حس زنده بودن به صفحه می‌ده.
• در `@media (max-width: 768px)`، متن دکمه رو پنهان کردیم تا تو موبایل فضای کمتری بگیره و فقط آیکون دیده بشه. این یه تقییر کوچک برای افزایش کارایی در صفحات کوچک است.

قدم ۳: منطق جاوااسکریپت قدرتمند

قلب ماجرا اینجاست! این اسکریپت مسئول اجرای عملیات کپی و نمایش فیدبک به کاربره.

document.addEventListener('DOMContentLoaded', () => {
    // همه دکمه‌های کپی رو پیدا می‌کنیم
    const copyButtons = document.querySelectorAll('.copy-btn');

    copyButtons.forEach(button => {
        button.addEventListener('click', async () => {
            const targetId = button.dataset.targetId;
            const codeElement = document.getElementById(targetId);
            const feedbackElement = button.nextElementSibling; // span.copy-feedback

            if (!codeElement) {
                console.error(`Element with ID "${targetId}" not found.`);
                showFeedback(feedbackElement, 'خطا!', 'error');
                return;
            }

            const textToCopy = codeElement.textContent;

            try {
                // چک می‌کنیم آیا مرورگر از Clipboard API پشتیبانی می‌کنه یا نه
                if (navigator.clipboard && navigator.clipboard.writeText) {
                    await navigator.clipboard.writeText(textToCopy);
                    showFeedback(feedbackElement, 'کپی شد!', 'success');
                } else {
                    // Fallback برای مرورگرهای قدیمی‌تر (اختیاری)
                    // این قسمت برای IE یا مرورگرهای خیلی قدیمی کاربرد داره
                    const textarea = document.createElement('textarea');
                    textarea.value = textToCopy;
                    textarea.style.position = 'fixed'; // برای اینکه دیده نشه
                    textarea.style.left = '-9999px';
                    document.body.appendChild(textarea);
                    textarea.focus();
                    textarea.select();
                    document.execCommand('copy');
                    textarea.remove();
                    showFeedback(feedbackElement, 'کپی شد! (Fallback)', 'success');
                }
            } catch (err) {
                console.error('Failed to copy text: ', err);
                showFeedback(feedbackElement, 'کپی نشد!', 'error');
            }
        });
    });

    // تابع برای نمایش فیدبک بصری
    function showFeedback(element, message, type) {
        element.textContent = message;
        element.classList.remove('success', 'error'); // کلاس‌های قبلی رو پاک می‌کنیم
        element.classList.add(type, 'show'); // کلاس جدید و 'show' رو اضافه می‌کنیم

        // بعد از چند ثانیه فیدبک رو پنهان می‌کنیم
        setTimeout(() => {
            element.classList.remove('show');
            // بعد از پنهان شدن کلاس‌های رنگی رو هم پاک می‌کنیم
            setTimeout(() => {
                element.classList.remove('success', 'error');
            }, 300); // زمان transition CSS
        }, 2000); // 2 ثانیه نمایش
    }
});

// برای اینکه دکمه کپی در بلوک‌های کد خود مقاله هم کار کنه
async function copyCodeSample(button) {
    const targetId = button.dataset.target;
    const codeElement = document.getElementById(targetId);
    if (!codeElement) {
        console.error(`Code element with ID "${targetId}" not found.`);
        return;
    }
    const textToCopy = codeElement.textContent;
    try {
        await navigator.clipboard.writeText(textToCopy);
        button.textContent = 'کپی شد!';
        setTimeout(() => {
            button.textContent = 'کپی';
        }, 2000);
    } catch (err) {
        console.error('Failed to copy code sample: ', err);
        button.textContent = 'خطا!';
        setTimeout(() => {
            button.textContent = 'کپی';
        }, 2000);
    }
}
    

توضیحات جاوااسکریپت:

• `DOMContentLoaded`: مطمئن می‌شیم که DOM کاملاً بارگذاری شده.
• `querySelectorAll(‘.copy-btn’)`: همه دکمه‌های کپی رو انتخاب می‌کنیم.
• `async/await`: چون `navigator.clipboard.writeText` یک Promise برمی‌گردونه، از `async/await` برای مدیریت عملیات ناهمگام استفاده می‌کنیم.
• `button.dataset.targetId`: با استفاده از `dataset` به `id` عنصر کدی که باید کپی بشه دسترسی پیدا می‌کنیم.
• مدیریت خطا (`try…catch`): خیلی مهمه که عملیات کپی رو تو یه بلوک `try…catch` قرار بدیم چون ممکنه به دلایل امنیتی (مثلاً کاربر اجازه نده یا مرورگر قدیمی باشه) خطا رخ بده.
• فیدبک بصری: تابع `showFeedback` رو برای نمایش پیام‌های موفقیت یا خطا پیاده‌سازی کردیم که با اضافه کردن کلاس `show` به `copy-feedback`، پیام رو نمایش می‌ده و بعد از ۲ ثانیه پنهان می‌کنه.
• Fallback (اختیاری): اگه `navigator.clipboard` در دسترس نبود، یه راه حل جایگزین با `document.execCommand` ارائه دادیم (البته همونطور که گفتیم، این روش منسوخ شده).

نکات کلیدی برای یک Copy-to-Clipboard بی‌نقص

ساختن یه دکمه کپی به کلیپ‌بورد فقط در مورد کپی کردن متن نیست، بلکه در مورد ارائه یه تجربه کاربری کامل و بدون دردسره. این نکات رو فراموش نکن:

۱. مدیریت خطا و اجازه دسترسی (Permissions)

Clipboard API برای امنیت کاربر نیاز به اجازه (permission) داره. در محیط HTTPS، معمولاً این اجازه به صورت خودکار داده می‌شه، اما در شرایط خاص (مثلاً اگر کاربر قبلاً اجازه رو رد کرده باشه) ممکنه نیاز به درخواست مجدد باشه. حتماً بلوک `try…catch` رو برای مدیریت این موارد داشته باش.

۲. فیدبک بصری و صوتی (Visual & Auditory Feedback)

بعد از هر عملیات کپی، کاربر باید متوجه بشه که کار با موفقیت انجام شده یا نه. یه پیام کوتاه “کپی شد!” (همراه با یه انیمیشن محو شدن) یا حتی یه صدای خیلی ظریف، تجربه رو خیلی بهتر می‌کنه. ما از فیدبک بصری استفاده کردیم، ولی می‌تونی با افزودن یه `Audio` تگ، فیدبک صوتی هم اضافه کنی.

۳. دسترسی‌پذیری (Accessibility – A11y)

مطمئن شو که قابلیتت برای همه کاربرها، از جمله کسانی که از screen reader یا کیبورد استفاده می‌کنن، قابل دسترس باشه. استفاده از `aria-label` برای دکمه کپی (مثلاً `aria-label=”کپی کردن کد”` ) و `aria-live=”polite”` برای پیام فیدبک، قدم‌های مهمی در این راستاست.

۴. رسپانسیو بودن و سازگاری با دستگاه‌های مختلف

همونطور که تو بخش CSS دیدیم، حتماً استایل‌ها رو برای نمایش صحیح در موبایل، تبلت، لپ‌تاپ و حتی نمایشگرهای بزرگ مثل تلویزیون بهینه کن. بلوک‌های کد باید در اندازه‌های مختلف صفحه خوب به نظر بیان و دکمه کپی همیشه در دسترس باشه. استفاده از `flexbox` یا `grid` برای چیدمان و `media queries` برای تنظیم اندازه فونت و موقعیت عناصر، خیلی کمک‌کننده است.

۵. پاکسازی کد (Sanitization)

قبل از کپی کردن، مطمئن شو که فقط محتوای متنی کد رو کپی می‌کنی و هیچ تگ HTML یا کاراکتر ناخواسته‌ای همراهش نیست. `textContent` در جاوااسکریپت این کار رو برات انجام می‌ده و فقط متن خالص رو برمی‌گردونه.

جدول مقایسه‌ای: Clipboard API در مقابل execCommand

برای اینکه فرق این دو روش اصلی رو بهتر درک کنی، این جدول مقایسه‌ای رو آماده کردم:

عیب‌یابی سریع (Troubleshooting)

حتی حرفه‌ای‌ترین‌ها هم گاهی با مشکل برمی‌خورن. اگه دکمه کپی کدت اونطوری که باید کار نمی‌کنه، این موارد رو چک کن:

اگه با این راه حل‌ها باز هم مشکلت حل نشد، می‌تونی برای تماس با تیم فنی ما از طریق صفحه تماس اقدام کنی. ما آماده‌ایم تا بهت کمک کنیم.

چگونه یک Copy-to-Clipboard حرفه‌ای برای کدهای سایت بسازیم؟

ارائه کدهای تمیز و کاربردی در وب‌سایت‌های آموزشی، یک بخش کار است؛ اما بخش مهم‌تر، فراهم کردن ابزاری برای کپی آسان این کدها توسط کاربران است. برای بسیاری از برنامه‌نوسان و طراحان وب، هیچ‌چیز آزاردهنده‌تر از این نیست که مجبور باشند خطوط طولانی کد را به‌صورت دستی انتخاب (Select) و کپی کنند. یک دکمه Copy-to-Clipboard هوشمند و زیبا نه تنها تجربه کاربری (UX) سایت شما را ارتقا می‌دهد، بلکه تعامل کاربران با محتوای فنی را تا چند برابر افزایش می‌دهد.

چرا وجود قابلیت کپی در کلیپ‌بورد برای سایت‌های فنی حیاتی است؟

هنگامی که یک برنامه‌نویس به سایت شما مراجعه می‌کند، هدف او یافتن سریع راه‌حل برای حل یک باگ یا پیاده‌سازی یک ویژگی جدید است. اگر وب‌سایت شما بخش غنی از انواع کدهای آماده را ارائه می‌دهد، ایجاد اصطکاک برای کپی کردن کدهای کاربردی می‌تواند منجر به خروج سریع کاربر از صفحه شود. استفاده از راه‌حل‌های نوین برای نمایش کدهای بهینه‌سازی‌شده، مانند آنچه در مرجع اسنیپت‌های fa-tools مشاهده می‌کنید، نمونه‌ای استاندارد از رعایت این اصول تعاملی است.

برخی از مهم‌ترین مزایای اضافه کردن دکمه Copy به کدهای سایت شامل موارد زیر است:

• بهبود نرخ ماندگاری کاربر (Dwell Time): کاربران کدهای تمیز و منظم را دوست دارند و بیشتر در صفحات شما کاوش می‌کنند.
• کاهش خطاهای انسانی: در هنگام انتخاب دستی متن، معمولاً برخی کاراکترها مثل نقطه‌ویرگول (;) یا کروشه‌ها جا می‌افتند؛ کپی خودکار این مشکل را به طور کامل حل می‌کند.
• حرفه‌ای نشان دادن وب‌سایت: پیاده‌سازی تعاملات مدرن وب، سیگنال مثبتی به موتورهای جستجو در زمینه تجربه کاربری خوب (Core Web Vitals) ارسال می‌کند.

بررسی تفاوت متدهای قدیمی و مدرن در جاوا اسکریپت

در گذشته برای انتقال یک متن به حافظه موقت سیستم کاربر، از متد قدیمی document.execCommand('copy') استفاده می‌شد. این متد مشکلات امنیتی زیادی داشت و امروزه توسط مرورگرهای مدرن پشتیبانی نمی‌شود (Deprecated شده است).

در مقابل، Clipboard API به عنوان یک استاندارد نوین و ایمن معرفی شد. این API بر پایه سیستم ناهمگام (Asynchronous) کار می‌کند و با بازگرداندن یک Promise، به توسعه‌دهنده اجازه می‌دهد تا متوجه شود که عملیات کپی با موفقیت انجام شده است یا با خطا مواجه گردیده است.

آموزش قدم به قدم پیاده‌سازی سیستم کپی کدهای سایت

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

بخش اول: ساختار HTML (تگ‌های اصلی)

ساختار اصلی ما شامل یک کانتینر نگه‌دارنده، دکمه کپی و تگ <pre> برای نمایش کدها است. برای درک بهتر نحوه چینش تگ‌های مادر و فرزند، می‌توانید راهنماهای تخصصی در بخش اسنیپت‌های HTML را نیز مطالعه کنید.

<div class="code-wrapper" style="position: relative; max-width: 100%;">
    <button class="copy-btn" onclick="copyCode(this)">کپی کد</button>
    <pre><code class="language-javascript">
        const greet = () => console.log("Hello World!");
    </code></pre>
</div>

بخش دوم: استایل‌دهی با CSS (ریسپانسیو و زیبا)

برای اینکه دکمه کپی به طور هوشمند تنها در زمان هاور کردن موس روی کادر کد ظاهر شود و روی موبایل‌ها نیز پایداری عالی داشته باشد، استایل زیر را پیشنهاد می‌کنیم. برای دریافت افکت‌ها و انیمیشن‌های پیشرفته‌تر، به بخش جذاب اسنیپت‌های CSS مراجعه نمایید.

.code-wrapper {
    position: relative;
    border-radius: 8px;
    background-color: #1e293b;
    margin: 20px 0;
}
.copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #3b82f6;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    opacity: 0;
    transition: opacity 0.3s ease, background-color 0.2s ease;
}
.code-wrapper:hover .copy-btn {
    opacity: 1;
}
.copy-btn:hover {
    background-color: #2563eb;
}

بخش سوم: منطق جاوا اسکریپت با Clipboard API

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

function copyCode(buttonElement) {
    // پیدا کردن تگ کدی که در مجاورت دکمه قرار دارد
    const parent = buttonElement.parentElement;
    const codeTag = parent.querySelector('code');
    const textToCopy = codeTag.innerText;

    // استفاده از ای پی آی کلیپ بورد مدرن مرورگر
    navigator.clipboard.writeText(textToCopy).then(() => {
        // تغییر وضعیت دکمه جهت بازخورد موفقیت‌آمیز به کاربر
        buttonElement.innerText = 'کپی شد!';
        buttonElement.style.backgroundColor = '#10b981'; // تغییر رنگ دکمه به سبز

        // بازگشت به حالت اولیه پس از ۲ ثانیه
        setTimeout(() => {
            buttonElement.innerText = 'کپی کد';
            buttonElement.style.backgroundColor = '#3b82f6';
        }, 2000);
    }).catch(err => {
        console.error('خطا در کپی کردن کدهای وبسایت: ', err);
        buttonElement.innerText = 'خطا!';
        buttonElement.style.backgroundColor = '#ef4444';
    });
}

بهینه‌سازی تجربه کاربری (تغییر وضعیت دکمه و افکت‌های بصری)

اگر وب‌سایت شما بر پایه وردپرس است، می‌توانید این اسکریپت‌ها را به قالب فرزند خود اضافه کنید تا تمام بلاک‌های کد گوتنبرگ به صورت خودکار به این قابلیت مجهز شوند. استفاده از اصول کدنویسی که در راهنمای جامع اسنیپت‌های وردپرس معرفی شده‌اند به شما کمک می‌کند کدهای اضافی را فیلتر کرده و تنها جاوا اسکریپت‌های سبک را در فرانت‌اند بارگذاری نمایید.

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

بخش عیب‌یابی سریع (Troubleshooting) کدهای کپی

گاهی ممکن است سیستم کپی به خوبی عمل نکرده یا در محیط‌های تستی با خطاهایی روبرو شود. در این بخش رایج‌ترین مشکلات توسعه‌دهندگان در زمان پیاده‌سازی این قابلیت را بررسی کرده‌ایم:

سوالات متداول کاربران

{
“@context”: “https://schema.org”,
“@type”: “FAQPage”,
“mainEntity”: [
{
“@type”: “Question”,
“name”: “آیا استفاده از متد قدیمی document.execCommand هنوز توجیه‌پذیر است؟”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “خیر؛ این قابلیت از بیشتر مرورگرهای جدید حذف شده یا هشدارهای جدی در کنسول مرورگر نمایش می‌دهد. بهتر است به طور کامل به سمت API بومی کلیپ‌بورد کوچ کنید.”
}
},
{
“@type”: “Question”,
“name”: “چگونه از کپی شدن فضاهای خالی اضافی جلوگیری کنیم؟”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “با استفاده از متد جاوااسکریپت .trim() روی متن برداشته‌شده از تگ کد، می‌توانید به سادگی فاصله‌های هرز ابتدا و انتهای کد را حذف کنید.”
}
},
{
“@type”: “Question”,
“name”: “آیا این سیستم کپی با افزونه‌های هایلایتر وردپرس تداخل دارد؟”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “کد جاوا اسکریپت معرفی‌شده در این مقاله به صورت مستقل و کامپوننت‌بیس عمل می‌کند و هیچ تداخلی با پلاگین‌های هایلایتر کدهای شما ندارد.”
}
}
]
}