clipboard polyfill
v4.1.1
clipboard-polyfillclipboard-polyfill untuk menyalin teks! Catatan: Mulai tahun 2020, Anda dapat menggunakan navigator.clipboard.writeText(...) di versi stabil semua browser utama. Perpustakaan ini hanya akan berguna bagi Anda jika Anda ingin:
text/html di Firefox ≤126,ClipboardItem API di Firefox ≤126, ataujsdom ).Lihat bagian Kompatibilitas di bawah untuk detail lebih lanjut.
Membuat penyalinan di web semudah:
clipboard . writeText ( "hello world" ) ; Pustaka ini adalah ponyfill/polyfill untuk API papan klip asinkron berbasis Promise modern.
Jika Anda menggunakan npm , instal:
npm install clipboard-polyfillContoh aplikasi yang menyalin teks ke clipboard:
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 ) ;
} ) ;Catatan:
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 ) ;
} ) ;Periksa spesifikasi Clipboard API untuk detail selengkapnya.
Catatan:
async untuk sintaks await .text/plain dan text/html adalah satu-satunya tipe data yang dapat ditulis ke clipboard di sebagian besar browser.read() hanya dapat mengembalikan sebagian tipe data yang didukung, meskipun clipboard berisi lebih banyak tipe data. Tidak ada cara untuk mengetahui apakah ada lebih banyak tipe data.overwrite-globals Jika Anda ingin perpustakaan menimpa API clipboard global dengan implementasinya, import clipboard-polyfill/overwrite-globals . Ini akan mengubah perpustakaan dari ponyfill menjadi polyfill yang tepat, sehingga Anda dapat menulis kode seolah-olah API clipboard async sudah diterapkan di browser Anda:
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 ) ;
} ) ;Pendekatan ini tidak disarankan, karena dapat merusak kode lain yang berinteraksi dengan API global clipboard, dan mungkin tidak kompatibel dengan implementasi browser di masa mendatang.
Promise disertakan Jika Anda perlu mengambil versi yang "berfungsi", unduh clipboard-polyfill.window-var.promise.es5.js dan sertakan menggunakan tag <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 > Berkat kemudahan ekosistem JS modern, kami tidak lagi menyediakan build tree shake, minified, atau CommonJS. Untuk mendapatkan build seperti itu tanpa kehilangan kompatibilitas, teruskan build clipboard-polyfill melalui esbuild . Misalnya:
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 ? Browser telah mengimplementasikan beberapa API clipboard dari waktu ke waktu, dan menulis ke clipboard tanpa memicu bug di berbagai browser lama dan terkini cukup rumit. Di setiap browser yang mendukung penyalinan ke clipboard dengan cara tertentu, clipboard-polyfill berupaya bertindak sedekat mungkin dengan API clipboard async. (Lihat di atas untuk penafian dan batasan.)
Lihat presentasi ini untuk mengetahui riwayat akses papan klip yang lebih panjang di web.
clipboard-polyfill menambahkan dukungan.Tulis dukungan berdasarkan versi browser paling awal:
| Peramban | writeText() | write() (HTML) | write() (format lain) |
|---|---|---|---|
| Safari 13.1 | ☑️ | ☑️ | ☑️ ( image/uri-list , image/png ) |
| Chrome 86ᵃ / Edge 86 | ☑️ | ☑️ | ☑️ ( image/png ) |
| Chrome 76ᵃ / Tepi 79 | ☑️ | ✅ | ☑️ ( image/png ) |
| Chrome 66ᵃ / Firefox 63 | ☑️ | ✅ | |
| Safari 10 / Chrome 42ᵃ / Edgeᵈ / Firefox 41 | ✅ | ✅ᵇ | |
| yaitu 9 | ✅ᶜ |
Baca dukungan:
| Peramban | readText() | read() (HTML) | read() (format lain) |
|---|---|---|---|
| Safari 13.1 | ☑️ | ☑️ | ☑️ ( image/uri-list , image/png ) |
| Chrome 76ᵃ / Edge 79 | ☑️ | ☑️ ( image/png ) | |
| Chrome 66ᵃ | ☑️ | ||
| yaitu 9 | ✅ᶜ | ||
| Firefox |
window.Promise Janji jika Anda ingin perpustakaan berfungsi.clipboard-polyfill akan selalu melaporkan keberhasilan dalam kasus ini.ClipboardItem .text/html tidak ditulis menggunakan format CF_HTML yang diharapkan. clipboard-polyfill tidak mencoba mengatasi hal ini, karena 1) memerlukan sniffing versi browser yang rapuh, 2) pengguna Edge umumnya tidak terjebak pada versi <17, dan 3) mode kegagalan untuk browser lain adalah clipboard yang tidak valid HTML disalin. (Bug Tepi #14372529, #73) clipboard-polyfill menggunakan berbagai heuristik untuk mengatasi bug kompatibilitas. Harap beri tahu kami jika Anda mengalami masalah kompatibilitas dengan salah satu browser yang tercantum di atas.
| Peramban | Mendukung versi pertamanavigator.clipboard.writeText(...) | Tanggal Rilis |
|---|---|---|
| krom | 66+ | April 2018 |
| Firefox | 53+ | Oktober 2018 |
| Tepian | 79+ (rilis berbasis Chromium pertama) | Januari 2020 |
| Safari | 13.1+ | Maret 2020 |
Proyek ini dimulai ketika akses clipboard di JS hampir tidak mungkin dilakukan, dan upaya API clipboard yang ergonomis terhenti. (Lihat presentasi ini untuk konteks lebih lanjut.) Untungnya, API ergonomis dengan fungsi yang sama kini tersedia di semua browser modern sejak tahun 2020:
document.execCommand("copy") yang tidak berfungsi (dengan banyak, banyak masalah).clipboard.js (setengah tahun sebelum @zenorocha memilih nama yang sama?).crbug.com/593475 ).clipboard-polyfill untuk mencerminkan perombakan API v2 yang selaras dengan spesifikasi draf.navigator.clipboard.writeText() .navigator.clipboard.write() (termasuk dukungan text/html ).Terima kasih kepada Gary Kacmarcik, Hallvord Steen, dan lainnya yang telah membantu menghidupkan API clipboard asinkron!
Jika Anda hanya perlu menyalin teks di browser modern, pertimbangkan untuk menggunakan navigator.clipboard.writeText() secara langsung: https://caniuse.com/mdn-api_clipboard_writetext
Jika Anda juga perlu menyalin teks di browser lama, Anda juga dapat mencoba intisari ini untuk solusi peretasan sederhana.
