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

يمكنك القيام بذلك بعدة طرق منها استخدام ال 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" />

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

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

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

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

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

بتاريخ 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" />

 

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