دليل شامل لإنشاء زر نسخ لمحتوى Textarea

1. المقدمة

في هذا الدليل، سنتعلم كيفية إنشاء زر نسخ لمحتوى عنصر Textarea باستخدام HTML وCSS وJavaScript. هذه الميزة مفيدة عندما تريد السماح للمستخدمين بنسخ نصوص معدة مسبقًا بسهولة.

2. التنفيذ الأساسي

أ. الكود الأساسي

هذا النص سيتم نسخه عند الضغط على الزر.

ب. كود HTML وCSS وJavaScript

<div class="copy-container">
    <textarea id="copyText" rows="5" readonly>
هذا النص سيتم نسخه عند الضغط على الزر.
    </textarea>
    <button class="copy-btn" onclick="copyToClipboard()">نسخ النص</button>
</div>

<style>
.copy-container {
    position: relative;
    max-width: 500px;
    margin: 20px auto;
}

.copy-container textarea {
    width: 100%;
    padding: 10px;
    padding-right: 80px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: Arial, sans-serif;
    resize: vertical;
}

.copy-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    padding: 5px 12px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

.copy-btn:hover {
    background: #45a049;
}

.copy-btn.copied {
    background: #2196F3;
}
</style>

<script>
function copyToClipboard() {
    const textarea = document.getElementById("copyText");
    textarea.select();
    
    try {
        navigator.clipboard.writeText(textarea.value)
            .then(() => {
                const btn = document.querySelector(".copy-btn");
                btn.textContent = "تم النسخ!";
                btn.classList.add("copied");
                
                setTimeout(() => {
                    btn.textContent = "نسخ النص";
                    btn.classList.remove("copied");
                }, 2000);
            });
    } catch (err) {
        document.execCommand("copy");
        alert("تم نسخ النص!");
    }
}
</script>

. استخدام الكود في منصات مختلفة

أ. WordPress

لإضافته في ووردبريس:

function copy_textarea_shortcode() {
    ob_start();
    ?>
    <div class="copy-container">
        <textarea id="copyText" rows="5" readonly>النص هنا...</textarea>
        <button class="copy-btn" onclick="copyToClipboard()">نسخ النص</button>
    </div>
    <script>
        function copyToClipboard() {
            const textarea = document.getElementById("copyText");
            textarea.select();
            navigator.clipboard.writeText(textarea.value)
                .then(() => alert("تم النسخ!"));
        }
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('copy_textarea', 'copy_textarea_shortcode');

ثم استخدم [copy_textarea] في المحرر.

ب. Blogger

لإضافته في بلوجر:

<div class='copy-container'>
    <textarea id='copyText' rows='5' readonly>النص هنا...</textarea>
    <button class='copy-btn' onclick='copyToClipboard()'>نسخ النص</button>
</div>
<script>
    function copyToClipboard() {
        const textarea = document.getElementById("copyText");
        textarea.select();
        document.execCommand("copy");
        alert("تم النسخ!");
    }
</script>
<style>
    .copy-container { position: relative; max-width: 500px; margin: 20px auto; }
    .copy-btn { position: absolute; right: 10px; top: 10px; background: #4CAF50; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; }
</style>

4. تحسينات إضافية

أ. إضافة أيقونة نسخ

<button class="copy-btn" onclick="copyToClipboard()">
    <i class="fas fa-copy"></i> نسخ
</button>

ب. نسخ النص عند النقر على Textarea

document.getElementById("copyText").addEventListener("click", function() {
    this.select();
    navigator.clipboard.writeText(this.value)
        .then(() => alert("تم النسخ!"));
});

ج. جدول مقارنة بين الطرق

الطريقة	الاستخدام
HTML + CSS + JS	يعمل في أي موقع تقليدي
WordPress	إما عبر HTML Block أو Shortcode
Blogger	تعديل HTML مباشرةً
React/Vue	مكون قابل لإعادة الاستخدام

5. الخاتمة

الآن لديك كل ما تحتاجه لإنشاء زر نسخ لمحتوى Textarea في أي موقع أو منصة. يمكنك تخصيص التصميم والوظائف حسب احتياجاتك الخاصة.