كيف يمكن إنشاء زر عند الضغط عليه يقوم بحفظ شيء ما في جافاسكريبت؟

بعد إضافة الزر ضمن HTML يمكنك الاستفادة من الخاصية onclick له لاستدعاء تابع جافاسكريبت معين لينفذ العمل المطلوب كالتالي:

<button onclick="save()">حفظ</button>

وضمن جافاسكريبت تعرف التابع الخاص بك:

function save(){
 // تنفيذ العمل المطلوب
}

يمكنك الاستفادة من قراءة المقال التالي:

يمكنك القيام بذلك بعدة طرق منها استخدام ال Async Clipboard API عن طريق ال method التالية navigator.clipboard.writeText.

و لكن هذه الطريقة تعمل فقط إذا كان الموقع يعمل على خادم محلي localhost أو إذا كان النوقع يدعم https

var text = "مثال لنص نريد طباعته";

navigator.clipboard.writeText(text).then(function() {
  console.log('Copying to clipboard was successful!');
}, function(err) {
  console.error('Could not copy text: ', err);
});

يمكنك أيضًا استخدام الميثود document.execCommand("copy") و لكنها ليست مدعومة في كل المتصفحات الآن

function copyToClipboard(elementId) {

  // إنشاء حقل إدخال مخفي
  var aux = document.createElement("input");

  // نقوم بإعائه النص الذي نريد طباعته كقيمة له
  aux.setAttribute("value", document.getElementById(elementId).innerHTML);

  // body  نقوم بإضافته إلى ال 
  document.body.appendChild(aux);

  //  للمحتوى Highlight نقوم بعمل  
  aux.select();

  // نقوم بنسخ المحتوى الذي تم تحديده
  document.execCommand("copy");

  // body نقوم بحذف حقل الإدخال من ال 
  document.body.removeChild(aux);

}

<p id="p1">P1: I am paragraph 1</p>

<p id="p2">P2: I am a second paragraph</p>

<button onclick="copyToClipboard('p1')">Copy P1</button>

<button onclick="copyToClipboard('p2')">Copy P2</button>

<br/><br/>

<input type="text" placeholder="Paste here for test" />

بتاريخ 9 دقائق مضت قال Yomna Raouf:

يمكنك القيام بذلك بعدة طرق منها استخدام ال Async Clipboard API عن طريق ال method التالية navigator.clipboard.writeText.

و لكن هذه الطريقة تعمل فقط إذا كان الموقع يعمل على خادم محلي localhost أو إذا كان النوقع يدعم https

var text = "مثال لنص نريد طباعته";

navigator.clipboard.writeText(text).then(function() {
  console.log('Copying to clipboard was successful!');
}, function(err) {
  console.error('Could not copy text: ', err);
});

يمكنك أيضًا استخدام الميثود document.execCommand("copy") و لكنها ليست مدعومة في كل المتصفحات الآن

function copyToClipboard(elementId) {

  // إنشاء حقل إدخال مخفي
  var aux = document.createElement("input");

  // نقوم بإعائه النص الذي نريد طباعته كقيمة له
  aux.setAttribute("value", document.getElementById(elementId).innerHTML);

  // body  نقوم بإضافته إلى ال 
  document.body.appendChild(aux);

  //  للمحتوى Highlight نقوم بعمل  
  aux.select();

  // نقوم بنسخ المحتوى الذي تم تحديده
  document.execCommand("copy");

  // body نقوم بحذف حقل الإدخال من ال 
  document.body.removeChild(aux);

}

 

<p id="p1">P1: I am paragraph 1</p>

<p id="p2">P2: I am a second paragraph</p>

<button onclick="copyToClipboard('p1')">Copy P1</button>

<button onclick="copyToClipboard('p2')">Copy P2</button>

<br/><br/>

<input type="text" placeholder="Paste here for test" />

 

شكرا جدا ليكي انا كنت محتاجها اوي