clipboard copy element

องค์ประกอบ <คลิปบอร์ด-คัดลอก>

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

การติดตั้ง

 $ npm install --save @github/clipboard-copy-element

การใช้งาน

สคริปต์

นำเข้าเป็นโมดูล ES:

 import '@github/clipboard-copy-element'

ด้วยแท็กสคริปต์:

 < script type =" module " src =" ./node_modules/@github/clipboard-copy-element/dist/index.js " >

มาร์กอัป

 < clipboard-copy for =" blob-path " class =" btn btn-sm BtnGroup-item " >
  Copy path
</ clipboard-copy >
< div id =" blob-path " > src/index.js </ div > 

แหล่งข้อมูล

คุณลักษณะ

 < clipboard-copy value =" src/index.js " > Copy </ clipboard-copy >

เนื้อหาองค์ประกอบ

 < clipboard-copy for =" blob-path " > Copy </ clipboard-copy >
< div id =" blob-path " > src/index.js </ div >

ฟอร์มอินพุต

 < clipboard-copy for =" blob-path " > Copy </ clipboard-copy >
< input id =" blob-path " value =" src/index.js " >

Hyperlink Href

 < clipboard-copy for =" blob-path " > Copy full URL </ clipboard-copy >
< a id =" blob-path " href =" /path/to#my-blob " > Link text will not be copied </ a > 

เหตุการณ์

หลังจากคัดลอกไปยังคลิปบอร์ดเหตุการณ์ clipboard-copy จะถูกส่งจากองค์ประกอบ <clipboard-copy> :

 document . addEventListener ( 'clipboard-copy' , function ( event ) {
  const button = event . target
  button . classList . add ( 'highlight' )
} ) 

การสนับสนุนเบราว์เซอร์

เบราว์เซอร์ที่ไม่มีการรองรับองค์ประกอบแบบกำหนดเองแบบดั้งเดิมต้องการโพลีฟิล

• โครเมี่ยม
• Firefox
• ซาฟารี
• Microsoft Edge

การพัฒนา

 npm install
npm test

ใบอนุญาต

แจกจ่ายภายใต้ใบอนุญาต MIT ดูใบอนุญาตสำหรับรายละเอียด