web-dev-qa-db-ja.com

現在のクリップボードのコンテンツを取得しますか？

スクリプトを作成してクリップボードの内容を検出し、ページを開いたときにユーザーからの入力なしでテキストフィールドに貼り付ける方法を知りたいのですが。どうすればできますか？

javascriptclipboardpaste
73
Gabriele Cirulli

window.clipboardData.getData('Text')は一部のブラウザで動作します。ただし、機能するブラウザの多くは、Webページにクリップボードへのアクセスを許可するかどうかをユーザーに確認します。

64
Dave

これをいつ読むかによっては、navigator.clipboardを介して 新しいクリップボードAPI が利用できる場合があります。次のように使用できます。

navigator.clipboard.readText()
  .then(text => {
    console.log('Pasted content: ', text);
  })
  .catch(err => {
    console.error('Failed to read clipboard contents: ', err);
  });

または非同期構文の場合：

const text = await navigator.clipboard.readText();

これにより、ユーザーにアクセス許可の要求ダイアログボックスが表示されるため、おかしなビジネスはできません。

（注：これはコンソールから呼び出された場合は機能しませんが、ボタンを押すなどの直接的なユーザーアクションが必要です、@ Arturに感謝します）

詳細

仕様

36
iuliu.net

使用できます

window.clipboardData.getData('Text')

iEでユーザーのクリップボードのコンテンツを取得します。ただし、他のブラウザでは、クリップボードにアクセスするための標準インターフェイスがないため、コンテンツを取得するためにフラッシュを使用する必要がある場合があります。このプラグインを試してみることもできます Zero Clipboard

15
Ricky Jiao

以下は、選択したコンテンツとクリップボードの更新を提供します。

Copyイベントで要素IDをバインドし、選択したテキストを取得します。テキストを置換または変更できます。クリップボードを取得して、新しいテキストを設定します。正確なフォーマットを取得するには、タイプを「text/hmtl」に設定する必要があります。要素の代わりにドキュメントにバインドすることもできます。

      $(ElementId).bind('copy', function(event) {
        var selectedText = window.getSelection().toString(); 
        selectedText = selectedText.replace(/\u200B/g, "");

        clipboardData = event.clipboardData || window.clipboardData || event.originalEvent.clipboardData;
        clipboardData.setData('text/html', selectedText);

        event.preventDefault();
      });
5
Sollymanul Islam