clipboard polyfill
v4.1.1
clipboard-polyfillclipboard-polyfill เพื่อคัดลอกข้อความ! หมายเหตุ: ตั้งแต่ปี 2020 คุณสามารถใช้ navigator.clipboard.writeText(...) ในเบราว์เซอร์หลักทุกเวอร์ชันที่เสถียร ห้องสมุดนี้จะเป็นประโยชน์กับคุณเฉพาะในกรณีที่คุณต้องการ:
text/html ใน Firefox ≤126,ClipboardItem API ใน Firefox ≤126 หรือjsdom )ดูส่วนความเข้ากันได้ด้านล่างสำหรับรายละเอียดเพิ่มเติม
ทำให้การคัดลอกบนเว็บเป็นเรื่องง่ายเหมือน:
clipboard . writeText ( "hello world" ) ; ไลบรารีนี้เป็น Ponyfill/polyfill สำหรับ API คลิปบอร์ดแบบอะซิงโครนัสที่ใช้ Promise สมัยใหม่
หากคุณใช้ npm ให้ติดตั้ง:
npm install clipboard-polyfillแอปตัวอย่างที่คัดลอกข้อความไปยังคลิปบอร์ด:
import * as clipboard from "clipboard-polyfill" ;
function handler ( ) {
clipboard . writeText ( "This text is plain." ) . then (
( ) => { console . log ( "success!" ) ; } ,
( ) => { console . log ( "error!" ) ; }
) ;
}
window . addEventListener ( "DOMContentLoaded" , function ( ) {
const button = document . body . appendChild ( document . createElement ( "button" ) ) ;
button . textContent = "Copy" ;
button . addEventListener ( "click" , handler ) ;
} ) ;หมายเหตุ:
button )async / await ไวยากรณ์ import * as clipboard from "clipboard-polyfill" ;
async function handler ( ) {
console . log ( "Previous clipboard text:" , await clipboard . readText ( ) ) ;
await clipboard . writeText ( "This text is plain." ) ;
}
window . addEventListener ( "DOMContentLoaded" , function ( ) {
const button = document . body . appendChild ( document . createElement ( "button" ) ) ;
button . textContent = "Copy" ;
button . addEventListener ( "click" , handler ) ;
} ) ; import * as clipboard from "clipboard-polyfill" ;
async function handler ( ) {
console . log ( "Previous clipboard contents:" , await clipboard . read ( ) ) ;
const item = new clipboard . ClipboardItem ( {
"text/html" : new Blob (
[ "<i>Markup</i> <b>text</b>. Paste me into a rich text editor." ] ,
{ type : "text/html" }
) ,
"text/plain" : new Blob (
[ "Fallback markup text. Paste me into a rich text editor." ] ,
{ type : "text/plain" }
) ,
} ) ;
await clipboard . write ( [ item ] ) ;
}
window . addEventListener ( "DOMContentLoaded" , function ( ) {
const button = document . body . appendChild ( document . createElement ( "button" ) ) ;
button . textContent = "Copy" ;
button . addEventListener ( "click" , handler ) ;
} ) ;ตรวจสอบข้อกำหนดเฉพาะของ Clipboard API เพื่อดูรายละเอียดเพิ่มเติม
หมายเหตุ:
async สำหรับไวยากรณ์ awaittext/plain และ text/html เป็นประเภทข้อมูลเดียวที่สามารถเขียนลงในคลิปบอร์ดในเบราว์เซอร์ส่วนใหญ่ได้read() อาจส่งคืนชุดย่อยของประเภทข้อมูลที่รองรับเท่านั้น แม้ว่าคลิปบอร์ดจะมีประเภทข้อมูลมากกว่าก็ตาม ไม่มีทางบอกได้ว่ามีประเภทข้อมูลมากกว่านี้หรือไม่overwrite-globals หากคุณต้องการให้ไลบรารีเขียนทับ Global คลิปบอร์ด API ด้วยการใช้งาน ให้นำเข้า clipboard-polyfill/overwrite-globals การดำเนินการนี้จะเปลี่ยนไลบรารีจาก Ponyfill ให้เป็น Polyfill ที่เหมาะสม ดังนั้นคุณจึงสามารถเขียนโค้ดได้เหมือนกับว่า API คลิปบอร์ดของ async ได้ถูกนำไปใช้ในเบราว์เซอร์ของคุณแล้ว:
import "clipboard-polyfill/overwrite-globals" ;
async function handler ( ) {
const item = new window . ClipboardItem ( {
"text/html" : new Blob (
[ "<i>Markup</i> <b>text</b>. Paste me into a rich text editor." ] ,
{ type : "text/html" }
) ,
"text/plain" : new Blob (
[ "Fallback markup text. Paste me into a rich text editor." ] ,
{ type : "text/plain" }
) ,
} ) ;
navigator . clipboard . write ( [ item ] ) ;
}
window . addEventListener ( "DOMContentLoaded" , function ( ) {
const button = document . body . appendChild ( document . createElement ( "button" ) ) ;
button . textContent = "Copy" ;
button . addEventListener ( "click" , handler ) ;
} ) ;ไม่แนะนำให้ใช้วิธีนี้ เนื่องจากอาจทำให้โค้ดอื่นๆ ที่โต้ตอบกับ API ของคลิปบอร์ดเสียหาย และอาจเข้ากันไม่ได้กับการใช้งานเบราว์เซอร์ในอนาคต
Promise รวมอยู่ด้วย หากคุณต้องการคว้าเวอร์ชันที่ "ใช้งานได้" ให้ดาวน์โหลด clipboard-polyfill.window-var.promise.es5.js และรวมไว้โดยใช้แท็ก <script> :
< script src =" ./clipboard-polyfill.window-var.promise.es5.js " > </ script >
< button onclick =" copy() " > Copy text! </ button >
< script >
// `clipboard` is defined on the global `window` object.
function copy ( ) {
clipboard . writeText ( "hello world!" ) ;
}
</ script > ด้วยความสะดวกของระบบนิเวศ JS สมัยใหม่ เราจึงไม่มีโครงสร้างที่เขย่า ย่อขนาด หรือสร้าง CommonJS อีกต่อไป หากต้องการรับบิลด์ดังกล่าวโดยไม่สูญเสียความเข้ากันได้ ให้ส่ง clipboard-polyfill builds ผ่าน esbuild ตัวอย่างเช่น:
mkdir temp && cd temp && npm install clipboard-polyfill esbuild
# Minify the ES6 build:
echo ' export * from "clipboard-polyfill"; ' | npx esbuild --format=esm --target=es6 --bundle --minify
# Include just the `writeText()` export and minify:
echo ' export { writeText } from "clipboard-polyfill"; ' | npx esbuild --format=esm --target=es6 --bundle --minify
# Minify an ES5 build:
cat node_modules/clipboard-polyfill/dist/es5/window-var/clipboard-polyfill.window-var.promise.es5.js | npx esbuild --format=esm --target=es5 --bundle --minify
# Get a CommonJS build:
echo ' export * from "clipboard-polyfill"; ' | npx esbuild --format=cjs --target=es6 --bundleclipboard-polyfill ? เบราว์เซอร์ได้ใช้ API ของคลิปบอร์ดหลายตัวเมื่อเวลาผ่านไป และการเขียนลงในคลิปบอร์ดโดยไม่ทำให้เกิดข้อบกพร่องในเบราว์เซอร์รุ่นเก่าและปัจจุบันนั้นค่อนข้างยุ่งยาก ในทุกเบราว์เซอร์ที่รองรับการคัดลอกไปยังคลิปบอร์ดในทางใดทางหนึ่ง clipboard-polyfill จะพยายามดำเนินการให้ใกล้เคียงกับ API ของคลิปบอร์ด async มากที่สุด (ดูด้านบนสำหรับข้อจำกัดความรับผิดชอบและข้อจำกัด)
ดูการนำเสนอนี้เพื่อดูประวัติการเข้าถึงคลิปบอร์ดบนเว็บที่ยาวนานขึ้น
clipboard-polyfill เพิ่มการรองรับเขียนการสนับสนุนโดยเบราว์เซอร์เวอร์ชันแรกสุด:
| เบราว์เซอร์ | writeText() | write() (HTML) | write() (รูปแบบอื่น) |
|---|---|---|---|
| ซาฟารี 13.1 | ☑️ ( image/uri-list , image/png ) | ||
| โครม 86 ? / ขอบ 86 | ☑️ ( image/png ) | ||
| โครม 76? / ขอบ 79 | ☑️ ( image/png ) | ||
| โครม 66? / ไฟร์ฟอกซ์ 63 | |||
| Safari 10 / Chrome 42? / Edgeᵈ / Firefox 41 | ✅ᵇ | ||
| ไออี 9 | ✅ᶜ |
อ่านการสนับสนุน:
| เบราว์เซอร์ | readText() | read() (HTML) | read() (รูปแบบอื่น) |
|---|---|---|---|
| ซาฟารี 13.1 | ☑️ ( image/uri-list , image/png ) | ||
| โครม 76 ? / ขอบ 79 | ☑️ ( image/png ) | ||
| โครม 66เบ | |||
| ไออี 9 | ✅ᶜ | ||
| ไฟร์ฟอกซ์ |
window.Promise สัญญาหากคุณต้องการให้ไลบรารีใช้งานได้clipboard-polyfill จะรายงานความสำเร็จในกรณีนี้เสมอClipboardItemtext/html ไม่ได้ถูกเขียนโดยใช้รูปแบบ CF_HTML ที่คาดหวัง clipboard-polyfill ไม่ ได้พยายามแก้ไขปัญหานี้ เนื่องจาก 1) จะต้องมีการดมเวอร์ชันเบราว์เซอร์ที่เปราะบาง 2) โดยทั่วไปผู้ใช้ Edge จะไม่ติดอยู่ในเวอร์ชัน < 17 และ 3) โหมดความล้มเหลวสำหรับเบราว์เซอร์อื่นจะเป็นคลิปบอร์ดที่ไม่ถูกต้อง คัดลอก HTML แล้ว (แมลงขอบ #14372529, #73) clipboard-polyfill ใช้การวิเคราะห์พฤติกรรมที่หลากหลายเพื่อแก้ไขข้อบกพร่องด้านความเข้ากันได้ โปรดแจ้งให้เราทราบหากคุณประสบปัญหาความเข้ากันได้กับเบราว์เซอร์ใดๆ ที่ระบุไว้ข้างต้น
| เบราว์เซอร์ | รองรับเวอร์ชันแรกnavigator.clipboard.writeText(...) | วันที่วางจำหน่าย |
|---|---|---|
| โครเมียม | 66+ | เมษายน 2018 |
| ไฟร์ฟอกซ์ | 53+ | ตุลาคม 2018 |
| ขอบ | 79+ (รุ่นแรกที่ใช้ Chromium) | มกราคม 2020 |
| ซาฟารี | 13.1+ | มีนาคม 2020 |
โปรเจ็กต์นี้เริ่มต้นจากช่วงเวลาที่การเข้าถึงคลิปบอร์ดใน JS แทบจะเป็นไปไม่ได้เลย และความพยายามของ API คลิปบอร์ดตามหลักสรีระศาสตร์ก็หยุดชะงัก (ดูการนำเสนอนี้สำหรับบริบทเพิ่มเติมอีกเล็กน้อย) โชคดีที่ API ตามหลักสรีระศาสตร์พร้อมฟังก์ชันการทำงานเดียวกันนี้มีให้บริการในเบราว์เซอร์รุ่นใหม่ทั้งหมดตั้งแต่ปี 2020:
document.execCommand("copy") ที่หมดอายุแล้ว (มีปัญหามากมาย)clipboard.js (ครึ่งปีก่อนที่ @zenorocha จะเลือกชื่อเดียวกัน ?)crbug.com/593475 )clipboard-polyfill เพื่อให้สะท้อนถึงการยกเครื่อง API v2 ที่สอดคล้องกับข้อกำหนดฉบับร่างnavigator.clipboard.writeText()navigator.clipboard.write() (รวมถึงการรองรับ text/html )ขอขอบคุณ Gary Kacmarcik, Hallvord Steen และคนอื่นๆ ที่ช่วยทำให้ API คลิปบอร์ด async มีชีวิตขึ้นมา!
หากคุณต้องการคัดลอกข้อความในเบราว์เซอร์สมัยใหม่เท่านั้น ให้ลองใช้ navigator.clipboard.writeText() โดยตรง: https://caniuse.com/mdn-api_clipboard_writetext
หากคุณต้องการคัดลอกข้อความในเบราว์เซอร์รุ่นเก่าด้วย คุณสามารถลองใช้ส่วนสำคัญนี้เพื่อหาวิธีแก้ปัญหาการแฮ็กแบบง่ายๆ
