クリップボードのAPIでカット、コピー、ペースト

ブラウザのJavaScriptを使用してOSのクリップボードにアクセスするドキュメントを使用して数年に可能です.execcommand ().
残念ながら、いくつかの問題があります.

クリップボードのアクセスは、パフォーマンスとセキュリティの意味を持つ同期です

サポートは、特にMacOSとIOSの上でサファリの古いバージョンでは、パッチのようです

アクセス許可はブラウザ全体で異なり、

APIは決してエレガントではない
それは最終的に新しい非同期クリップボードAPIに取って代わられました.それは新しいです、そして、どんなブラウザーもすべての特徴を支持しません、しかし、それは使いやすくてより堅牢です.

なぜアプリはクリップボードにアクセスする必要がありますか?
開発者として、どのようにクリップボードが動作し、定期的に次のキーボードショートカットを使用する知っているよ

Ctrl + cmd + cをコピーする

Ctrl + cmd + xカットする

Ctrl + cmd + vペースト
より少ないコンピューティング経験をもつそれらは必ずしもその知識を持っていません.彼らはまた、キーボードショートカットが利用できないタッチスクリーンデバイスを使用することがあります.簡単にカットアンドペーストのアイコンを提供する役に立つことができます.

また、書式設定の追加や削除などのクリップボードのアクションが完了すると、コンテンツを変更する必要があります.

クリップボードへのアクセスは危険です!
クリップボードにアクセスすると、プログラムによっていくつかのセキュリティ上の問題が発生します.

ユーザーはしばしばパスワードや個人情報をコピーするので、ページは任意にクリップボードデータを読むことができません.

ページをクリップボードにデータを追加するときに制限する必要があります.悪意のあるページでは、コピーされたテキストを危険なコマンドや実行可能ファイルに置き換えることもできます.
潜在的な問題を避けるために、クリップボードAPIは、httpsの上で提供されるページ(localhostも許されます)で使われることができます.IFrameで実行すると、親ページはクリップボードの読み取りおよび/またはクリップボードの書き込み権限を付与する必要があります.

<iframe
  src="childpage.html"
  allow="clipboard-read; clipboard-write"
></iframe>

APIは、アクティブなブラウザのタブ(バックグラウンドタブではない)で利用可能であり、クリックなどのユーザーの相互作用によってのみトリガすることができます.必要に応じて、ユーザーはクリップボードデータを読み込む許可を求められます.
この警告は、ページが最初にクリップボードのアクセスを要求するときに表示されます.APIが非同期で、約束を返すなら、どんな問題も引き起こしてはいけません.許可APIを使用してステータスを調べて、要求することも可能です.

クリップボードAPI機能検出
クリップボードAPIはナビゲータが利用可能です.クリップボードは、真の結果を返します.例えば、

if (navigator.clipboard) {

  console.log('Clipboard API available');

}

しかし、これはブラウザがすべての機能をサポートすることを保証しません.たとえば、書き込み時に、chromeはAPIのreadtext ()メソッドをサポートしますが、Firefoxはそうしません.

コピー＆ペーストテキスト
コピーと貼り付けテキストは、ほとんどのアプリケーションで有用なオプションになります.APIは爽快に簡単です.

// copy text TO the clipboard
await navigator.clipboard.writeText('This text is now in the clipboard');

// get text FROM the clipboard
let text = await navigator.clipboard.readText();

サポートを検出し、エラーを処理するためにかなり多くのコードが必要になります.
クリップボードAPIのテキストを表示
このコードはGithubからダウンロードできます.クリップボードテキストを参照してください.ジャバスクリプト.
この例では、データコピー属性がボタンなどのHTML要素を追加するときにテキストコピーを実装します.これらのいずれかにこの値を設定できます.
無料でPHPを学ぶ!
PHPとMySQLの包括的なカバーでサーバーサイドプログラミングに飛躍する.
通常rrp $ 11.95あなたの絶対に絶対に無料
名称
電子メール
本を自由にする

ハードコピーされた文字列-データコピーのような=“これをクリップボードにコピー”.

CSSセレクタ-データコピーなどの“Cigper mysection”.最初に一致する要素のテキスト内容をコピーします.
必要に応じて、data - done属性にカスタム成功メッセージを設定できます.

<button data-copy="#mysection" data-done="section copied">
  copy text from #mysection
</button>

ボタンはナビゲータが表示されます.クリップボード.writetext ()がサポートされています.クリックすると、JavaScriptイベントハンドラーがテキストを見つけ、クリップボードにコピーし、アニメーションの成功メッセージを表示します.
テキスト貼り付けボタンは、DOMノードを指すデータペースト属性を定義する以外は非常に似ています.

<textarea id="pastehere"></textarea>
<button data-paste="#pastehere">paste</button>

コピー＆ペーストデータ
クリップボードAPIのreadtext ()およびwritetext ()は、より汎用的なread ()およびwrite ()メソッドの便利なオプションです.これらは少ないブラウザのサポートがありますが、バイナリ画像などの任意の種類のデータをコピーして貼り付けることができます.
copyには、fetch ()やキャンバスによって返されるBLOBデータが必要です.toblob ()メソッド.これはクリップボードにコンストラクタに渡され、クリップボードに書き込むことができます.

const
  image = await fetch('myimage.png'),
  blob = await image.blob();

await navigator.clipboard.write([
  new ClipboardItem({ [blob.type]: blob })
]);

複数のクリップボードオブジェクトを異なるコンテンツタイプで返すことができるので、ペーストはより複雑です.したがって、有用な形式が見つかるまで、それぞれの型を反復する必要があります.例えば、

const clipboardItems = await navigator.clipboard.read();

for (const clipboardItem of clipboardItems) {

  for (const type of clipboardItem.types) {

    if (type === 'image/png') {

      // return PNG blob
      return await clipboardItem.getType(type);

    }

  }

}

クリップボードのAPIイメージデモンストレーション(クロムベースのブラウザでサポート)を表示します.
このコードはGithubからダウンロードできます.ClipboardBlobを参照してください.ジャバスクリプト.
これは、テキストコピーに類似した方法で動作します.そのコピーと貼り付けボタンは、データCopyblobとデータPasteBlob属性のCSSセレクタを使用してDOM要素を指す必要があります.例えば、

<!-- copy image -->
<img id="myimage" src="myimage.png" alt="any image" />

<button data-copyblob="#myimage" data-done="image copied">
  copy image
</button>

<!-- paste into DOM -->
<div id="imagelist"></div>

<button data-pasteblob="#imagelist">
  paste image
</button>

グラフィックアプリケーションから画像データをコピーして貼り付けボタンを使用してみてください.

カット、コピー、ペーストイベント
カット、コピー、ペーストイベントは、ユーザーがブラウザでクリップボードのアクションを開始するたびに発生します.これはほとんどのブラウザーとハンドラ関数でサポートされているため、イベントとして渡されるClipboardDataオブジェクトを使用して変更を行うことができます.
次の関数は、すべてのカットまたはコピーされたテキストを大文字にします.e . preventdefaulted ()は、デフォルトのカット/コピーを停止します.

body.addEventListener('cut', cutCopyHandler);
body.addEventListener('copy', cutCopyHandler);

// cut or copy event handler
function cutCopyHandler(e) {

  const selection = document.getSelection();

  // send uppercase text to clipboard
  e.clipboardData.setData(
    'text/plain',
    selection.toString().toUpperCase()
  );

  if (e.type === 'cut') selection.deleteFromDocument();

  // stop default cut/copy
  e.preventDefault();

}

次のコードは、特定のフィールドに貼り付けハンドラーを添付します.この関数は既存の内容をクリアし、テキストをペーストします.

document.getElementById('field1').addEventListener('paste', pasteEvent);

// paste event handler
function pasteEvent(e) {

  // add 'pasted:' to pasted text
  const paste = 'pasted:\n' +
    (e.clipboardData || window.clipboardData).getData('text');

  e.target.value = paste;

  // stop default paste
  e.preventDefault();
}

クリップボードAPIイベントのデモ
このコードはGithubからダウンロードできます.demoeventsを参照のこと.JavaScriptのHTML.

準備ができて使用?
クリップボードAPIは新しいですが、合理的なブラウザのサポートを持っており、より古い文書より堅牢な感じ.execcommand ()オプション.
これは、進歩的な強化として、カット、コピー、ペースト機能として追加されますのみ機能は、アプリケーションが利用可能なときに、アプリケーションで実装されます.あなたがヘッドスタートを望むならば、ここで提供されるコードを使ってください.
この記事は、SitePointのおかげで気に入った.