نسخ النص عند الضغط على زر باستخدام javascript

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

هنا هو مثال بسيط يستخدم لغة JavaScript لتنفيذ وظيفة "Copy to Clipboard":

HTML:

<p id="mytext">Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.</p>

 
<button onclick="myFunction()">Copy text</button>

javascript :

function myFunction() {
  // Get the text field
  var copyText = document.getElementById("mytext");

  // Select the text field
  // For mobile devices

  // Copy the text inside the text field
  navigator.clipboard.writeText(copyText.innerHTML);
  
  // Alert the copied text
  alert("Copied the text: " + copyText);
}

في هذا المثال، لدينا زر "نسخ" وباراغراف يحتوي على النص الذي نرغب في نسخه. عند النقر على الزر، يتم تحديد محتوى النص ونسخه إلى الحافظة باستخدام navigator.clipboard.writeText(copyText.innerHTML). بعد ذلك، يتم عرض تنبيه يؤكد أن النص تم نسخه بنجاح.

يمكن استخدام وظيفة "Copy to Clipboard" في العديد من سيناريوهات التصميم وتطوير الويب، مثل مشاركة المحتوى، إنشاء روابط مشاركة، تنسيق البيانات، وغيرها. يسهم استخدامها في تحسين تجربة المستخدم وتوفير أداة سهلة الاستخدام لنسخ المحتوى دون عناء يدوي.