كيفية إضافة زر لنسخ محتوى معين على صفحات html

بسم الله الرحمن الرحيم.

الحمد لله حمدًا كثيرًا طيبًا مباركًا فيه.

وأصلي وأسلم على المبعوث هدًا ورحمة للعالمين

سيدنا ونبينا محمد , عليه أفضل الصلاة وأتم التسليم.

ثم أما بعد.

أيها الإخوة الكرام

السلام عليكم ورحمة الله وبركاته.

بعد انقطاع دام طويلًأ عن مواضيع html , ها أنا أعود إليكم لنستأنف سويًا ما بدأناه في عرض أكواد html

وهذه المرة سنتعرف على شيء مختلف ومفيد.

سنتعرف اليوم على طريقة إضافة زر لنسخ محتوى ما على صفحتك

لنقل بأنك قد وضعت اقتباسًأ لنص معين من مصدر معين, أو أنك وضعت كودًا برمجيًا معينًا في صفحتك, وتريد أن تضع زرًا يظهر للمستخدم ويقوم بعملية نسخ نص ما على الصفحة الخاصة بك بمجرد الضغط على ذلك الزر, فما السبيل إلى ذلك؟

في الحقيقة فإن الطريقة أسهل مما تتخيلون , فقط أعيروني انتباهكم لدى قراءتكم للأسطر القادمة.

---

في البداية , سنكتب تعليمات برمجية داخل صفحتنا , وهي عبارة عن أسطر برمجية بلغة java script.
سنكتب الآتي , ولا مانع من نسخ هذه الأكواد كما كتبت.

<script type-text="javascript">
function copyToClipboard(id) {
        var from = document.getElementById(id);
        var range = document.createRange();
        window.getSelection().removeAllRanges();
        range.selectNode(from);
        window.getSelection().addRange(range);
        document.execCommand('copy');
        window.getSelection().removeAllRanges();
        window.alert("تم نسخ النص.");
 }
</script>

يمكنك وضع الكود السابق في أي موضع من الصفحة , فهو عبارة عن مجرد تعليمات برمجية غير ظاهرة للمستخدم.
الآن إذا أردت نسخ نصًا معينًا قم بحصره داخل وسم الفقرات بالشكل الآتي:
<p id="txt">النص المطلوب نسخه </p>
تستطيع وضع أي محتوى تشاء بين الكودين <p id="txt"> والكود </p>
تلاحظ عزيزي القارئ بأن الوسم <p> قد أضفنا له خاصية تسمى id وقيمتها txt , وبإمكانك وضع أي قيمة تشاء بشرط أن لا تتكرر في عناصر أخرى, كما أنها تكتب باللغة الإنجليزية داخل علامتي التنصيص
ويتم استخدام القيمة هذه في عمليةا النسخ ما إذا كنت ستضع أكثر من زر لأكثر من نص , فهنا يجب حصر كل نص على حدة بين الوسم <p> مع تغيير قيمة الخاصية id
الآن كل شيء جاهز , تبقى إنشاء الزر الذي يستدعي الأوامر التي كتبناها لنسخ النص.
ويتم إنشاء الزر وربطه بمهمة النسخ بكتابة الآتي:
<button onclick="copyToClipboard('txt')"> نسخ النص </button>
ملاحظة: عبارة (نسخ النص) ستكون اسمًا للزر الذي سيقوم بعملية النسخ , حيث يمكنك استبداله بأي اسم تشاء.
أيضًا ينبغي الإشارة إلى أن كلمة txt الموضوعة بين علامتي ' هي عبارة عن قيمة خاصية id للعنصر p الذي حصرنا فيه النص المطلوب نسخه , أيضًا بإمكانك تغييره كيفما تشاء بشرط أن تكون القيمة موجودة بالفعل.
ملاحظة مهمة أخرى:
إذا كنت لا تريد عرض الرسالة التي تخبرك بنجاح عملية النسخ عند ضغط الزر , فقط قم بحذف السطر التالي من أكواد java script التي وضعتها لكم في بداية الشرح:
        window.alert("تم نسخ النص.");
أي سيكون الكود كالتالي:

<script type-text="javascript">
function copyToClipboard(id) {
        var from = document.getElementById(id);
        var range = document.createRange();
        window.getSelection().removeAllRanges();
        range.selectNode(from);
        window.getSelection().addRange(range);
        document.execCommand('copy');
        window.getSelection().removeAllRanges();
 }
</script>

---

ختامًا: أرجو أن أكون قد وفقت في إيصال المفيد لكم , مع خالص شكري للجميع على حسن المتابعة.
والسلام عليكم ورحمة الله وبركاته.