สามวิธีในการคัดลอกเนื้อหาของหน้าด้วย JavaScript (การแชร์สรุป)

มีปลั๊กอินของบริษัทอื่นมากมายที่สามารถใช้ฟังก์ชันคัดลอกได้ แต่ถ้าเราทำเอง เราจะรู้วิธีนำไปใช้หรือไม่

บทความนี้จะแนะนำตัวเลือกการใช้งานสามตัวเลือก

วิธีที่ 1: Async Clipboard API

การใช้ Async Clipboard API

วิธีนี้เป็นวิธีที่ง่ายที่สุดในการใช้งาน แต่ความเข้ากันได้ไม่ค่อยดีนักและมีข้อกำหนดมากมาย

โค้ดตัวอย่าง:

constpromise = navigator.clipboard.writeText(newClipText);

โปรดทราบว่าค่าที่ส่งคืนของเมธอดคือ Promise และเมื่อใช้วิธีนี้จะต้องโฟกัสหน้าเพจไม่เช่นนั้นจะรายงานข้อผิดพลาด

วิธีที่ 2: Document.execCommand API

ใช้ Document.execCommand

แม้ว่าวิธีการนี้จะถูกยกเลิกและไม่ใช่มาตรฐานเว็บอีกต่อไป แต่ก็มีปัจจัยทางประวัติศาสตร์มากมาย และฉันเชื่อว่าเบราว์เซอร์จะสนับสนุนมันมาเป็นเวลานาน

คัดลอกเนื้อหาองค์ประกอบ DOM

<p id="content">123456</p>
<button id="copyButton">คัดลอก</button>

เมื่อคัดลอกองค์ประกอบ DOM คุณต้องใช้ API การเลือกและ Range API เพิ่มเติม

Developer.mozilla.org/en-US/docs/…

Developer.mozilla.org/en-US/docs/…

โค้ดตัวอย่าง:

const copyButton = document.getElementById('copyButton');
const content = document.getElementById('เนื้อหา');
copyButton.addEventListener ('คลิก' ฟังก์ชั่น () {
  การเลือก const = window.getSelection();
  ช่วง const = document.createRange();
  //ตั้งค่าช่วงเนื้อหาที่เลือกselectNodeContents(content);
  // ล้างส่วนที่เลือกremoveAllRanges();
  //เพิ่มการเลือกเนื้อหาที่เลือก addRange(range);
  document.execCommand('สำเนา');
})

ต้องล้างส่วนที่เลือกก่อน จากนั้นจึงเพิ่มช่วง

มีปัญหาเกี่ยวกับรายละเอียดที่นี่ หลังจากคลิกปุ่มคัดลอก เนื้อหาที่คัดลอกก็จะถูกเลือกซึ่งค่อนข้างจะกระทันหันเล็กน้อย

วิธีแก้ไขคือการเรียก selection.removeAllRanges() หลังจากการคัดลอกเสร็จสิ้นเพื่อล้างส่วนที่เลือก

พิจารณาสถานการณ์อื่นที่ผู้ใช้เลือกส่วนของเพจก่อนที่จะคัดลอก หลังจากการคัดลอกเสร็จสิ้น นอกเหนือจากการล้างเนื้อหาสำเนาที่เลือกแล้ว คุณยังต้องกู้คืนเนื้อหาที่ผู้ใช้เลือกก่อนทำการคัดลอกอีกด้วย

รหัสการใช้งานมีดังนี้:

const copyButton = document.getElementById('copyButton');
const content = document.getElementById('เนื้อหา');
copyButton.addEventListener ('คลิก' ฟังก์ชั่น () {
  การเลือก const = window.getSelection();
  ช่วง const = document.createRange();
  //แคชเนื้อหาที่ผู้ใช้เลือก const currentRange =
    Selection.rangeCount === 0 ? null : Selection.getRangeAt(0);
  //ตั้งค่าช่วงส่วนของเอกสาร.selectNodeContents(เนื้อหา);
  // ล้างส่วนที่เลือกremoveAllRanges();
  //ตั้งค่าส่วนของเอกสารเป็นเนื้อหาที่เลือก addRange(range);
  พยายาม {
    // คัดลอกไปยังคลิปบอร์ด document.execCommand('copy');
  } จับ (ผิดพลาด) {
    // แจ้งว่าการคัดลอกล้มเหลว} ในที่สุด {
    การเลือกremoveAllRanges();
    ถ้า (ช่วงปัจจุบัน) {
      // เรียกคืนการเลือกเนื้อหาที่ผู้ใช้เลือก addRange (currentRange);
    -
  -
})

ขั้นแรกให้แคชเนื้อหาที่ผู้ใช้เลือก จากนั้นจึงกู้คืนเนื้อหาดังกล่าวหลังจากการคัดลอกเสร็จสมบูรณ์

คัดลอกเนื้อหาขององค์ประกอบอินพุต

และใช้วิธี select ของวัตถุองค์ประกอบอินพุตเพื่อเลือกเนื้อหา ไม่จำเป็นต้องสร้างส่วนของช่วงเพื่อตั้งค่าเนื้อหาที่เลือก

โค้ดตัวอย่าง:

const copyButton = document.getElementById('copyButton');
const inputEl = document.getElementById('input');
copyButton.addEventListener ('คลิก' ฟังก์ชั่น () {
  การเลือก const = window.getSelection();
  const ปัจจุบันช่วง =
    Selection.rangeCount === 0 ? null : Selection.getRangeAt(0);
  //เลือกเนื้อหาอินพุต inputEl.select();
  //คัดลอกไปที่คลิปบอร์ดลอง {
    document.execCommand('สำเนา');
  } จับ (ผิดพลาด) {
    // แจ้งว่าการคัดลอกล้มเหลว // . - -
  } ในที่สุด {
    การเลือกremoveAllRanges();
    ถ้า (ช่วงปัจจุบัน) {
      // เรียกคืนการเลือกเนื้อหาที่ผู้ใช้เลือก addRange (currentRange);
    -
  -
});

การคลิกปุ่มคัดลอกจะไม่ลบเนื้อหาที่เลือกไว้ก่อนหน้านี้

วิธีที่ 3: เขียนทับเหตุการณ์การคัดลอก

w3c.github.io/clipboard-a

... อ้างอิงโค้ดบางส่วนในลิงก์ด้านบนเป็นตัวอย่าง:

// เขียนทับสิ่งที่กำลังคัดลอกไปยังคลิปบอร์ด
document.addEventListener ('คัดลอก' ฟังก์ชั่น (e) {
  // e.clipboardData ว่างเปล่าในตอนแรก แต่เราสามารถตั้งค่าเป็น
  // ข้อมูลที่เราต้องการคัดลอกไปยังคลิปบอร์ด
  e.clipboardData.setData('ข้อความ/ธรรมดา', 'ไข่คนตะวันตก');
  // สิ่งนี้จำเป็นเพื่อป้องกันการเลือกเอกสารปัจจุบัน
  // กำลังเขียนลงในคลิปบอร์ด
  e.preventDefault();
})

คัดลอกเนื้อหาใดๆ บนหน้าเว็บและวางเนื้อหาที่ส่งออกจะเป็น "ไข่กวนแบบตะวันตก"