clipboard polyfill
v4.1.1
clipboard-polyfillclipboard-polyfill必要ありません。注: 2020 年現在、すべての主要ブラウザの安定バージョンでnavigator.clipboard.writeText(...)を使用できます。このライブラリは、次のことを行う場合にのみ役立ちます。
text/htmlをコピー、ClipboardItem API を使用する、またはjsdom ) で API シェイプをポリフィルします。詳細については、以下の「互換性」セクションを参照してください。
Web 上でのコピーが次のように簡単になります。
clipboard . writeText ( "hello world" ) ;このライブラリは、最新のPromiseベースの非同期クリップボード API 用のポニーフィル/ポリフィルです。
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 ) ;
} ) ;詳細については、クリップボード API 仕様を確認してください。
注:
await構文にはasync関数を使用する必要があります。text/plainとtext/htmlだけです。read()サポートされているデータ型のサブセットのみを返す場合があります。さらに多くのデータ型があるかどうかを知る方法はありません。overwrite-globalsバージョンライブラリでグローバル クリップボード API をその実装で上書きする場合は、 clipboard-polyfill/overwrite-globalsをインポートします。これにより、ライブラリがポニーフィルから適切なポリフィルに変わるため、非同期クリップボード API がすでにブラウザに実装されているかのようにコードを書くことができます。
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 ビルドは提供されなくなりました。互換性を失わずにそのようなビルドを取得するには、 esbuild介してclipboard-polyfillビルドを渡します。例えば：
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 にできるだけ近い動作をしようとします。 (免責事項と制限については上記を参照してください。)
Web 上のクリップボード アクセスのより長い歴史については、このプレゼンテーションを参照してください。
clipboard-polyfillサポートを追加します。ブラウザの最も古いバージョンによる書き込みサポート:
| ブラウザ | writeText() | write() (HTML) | write() (その他の形式) |
|---|---|---|---|
| サファリ13.1 | ☑️ | ☑️ | ☑️ ( image/uri-list 、 image/png ) |
| クロム 86 /エッジ 86 | ☑️ | ☑️ | ☑️ ( image/png ) |
| クロム 76ᵃ / エッジ 79 | ☑️ | ✅ | ☑️ ( image/png ) |
| Chrome 66ᵃ / Firefox 63 | ☑️ | ✅ | |
| Safari 10 / Chrome 42ᵃ / Edgeᵈ / Firefox 41 | ✅ | ✅ᵇ | |
| IE9 | ✅ᶜ |
サポートを読む:
| ブラウザ | readText() | read() (HTML) | read() (その他の形式) |
|---|---|---|---|
| サファリ13.1 | ☑️ | ☑️ | ☑️ ( image/uri-list 、 image/png ) |
| クロム 76 /エッジ 79 | ☑️ | ☑️ ( image/png ) | |
| クロム66ᵃ | ☑️ | ||
| IE9 | ✅ᶜ | ||
| ファイアーフォックス |
window.Promiseをポリフィルする必要があります。clipboard-polyfill常に成功を報告します。ClipboardItemコンストラクターに渡すオブジェクトの最後に、最も重要なデータ型を配置することを検討してください。text/htmlデータ型は、予期されるCF_HTML形式を使用して書き込まれません。 1) 脆弱なブラウザのバージョン スニッフィングが必要になるため、 clipboard-polyfillこれを回避しようとしません。2) Edge のユーザーは通常、バージョン 17 未満でスタックすることはなく、3) 他のブラウザの障害モードは無効なクリップボードであるためです。 HTMLがコピーされます。 (エッジのバグ #14372529、#73) clipboard-polyfill互換性のバグを回避するためにさまざまなヒューリスティックを使用します。上記のブラウザのいずれかで互換性の問題が発生した場合は、お知らせください。
| ブラウザ | 最初のバージョンのサポートnavigator.clipboard.writeText(...) | 発売日 |
|---|---|---|
| クロム | 66歳以上 | 2018年4月 |
| ファイアーフォックス | 53+ | 2018年10月 |
| 角 | 79+ (最初の Chromium ベースのリリース) | 2020年1月 |
| サファリ | 13.1+ | 2020年3月 |
このプロジェクトは、JS でのクリップボード アクセスがかろうじて可能になりつつあり、人間工学に基づいたクリップボード API の取り組みが停滞していた時期に遡ります。 (もう少し詳しい内容については、このプレゼンテーションを参照してください。) 幸いなことに、2020 年以降、同じ機能を備えた人間工学に基づいた API がすべての最新ブラウザーで利用できるようになりました。
document.execCommand("copy")呼び出しのサポートを開始しました (非常に多くの問題がありました)。clipboard.jsとして開始しました (@zenorocha が同じ名前を付ける半年前?)。crbug.com/593475など)。v2 API のオーバーホールを反映するために、このプロジェクトの名前をclipboard-polyfillに変更しました。navigator.clipboard.writeText()サポートを開始します。navigator.clipboard.write()サポートを開始します ( text/htmlサポートを含む)。非同期クリップボード API の実現にご協力いただいた Gary Kacmarcik 氏、Hallvord Steen 氏、その他の方々に感謝します。
最新のブラウザでテキストをコピーするだけの場合は、 navigator.clipboard.writeText()を直接使用することを検討してください: https://caniuse.com/mdn-api_clipboard_writetext
古いブラウザでもテキストをコピーする必要がある場合は、この要点を使って簡単なハッキング ソリューションを試すこともできます。
