web-dev-qa-db-ja.com

FireFox、Safari、Chromeを使用して、クリップボードにテキストをコピー/配置します

Internet Explorerでは、clipboardDataオブジェクトを使用してクリップボードにアクセスできます。 FireFox、Safari、Chromeでどのようにできますか？

javascriptdomclipboard
110
GvS

現在、ほとんどの最新のブラウザでこれを簡単に行う方法があります

document.execCommand('copy');

これにより、現在選択されているテキストがコピーされます。次を使用して、textAreaまたは入力フィールドを選択できます。

document.getElementById('myText').select();

テキストを目に見えないようにコピーするには、textAreaをすばやく生成し、ボックス内のテキストを変更して選択し、コピーしてから、textAreaを削除します。ほとんどの場合、このtextAreaは画面上でもフラッシュしません。

セキュリティ上の理由から、ブラウザは、ユーザーが何らかのアクション（ボタンのクリックなど）を行った場合にのみコピーを許可します。これを行う1つの方法は、テキストをコピーするメソッドを呼び出すhtmlボタンにonClickイベントを追加することです。

完全な例は次のようになります

<html>
<head>
    <title>copy test</title>
</head>
<body>
    <button onclick="copier()">Copy</button>
    <textarea id="myText">Copy me PLEASE!!!</textarea>

    <script>
        function copier(){
            document.getElementById('myText').select();
            document.execCommand('copy');
        }
    </script>
</body>
</html>
19
pythonHelpRequired

セキュリティ上の理由から、Firefoxではクリップボードにテキストを配置できません。ただし、Flashを使用して回避策を利用できます。

function copyIntoClipboard(text) {

    var flashId = 'flashId-HKxmj5';

    /* Replace this with your clipboard.swf location */
    var clipboardSWF = 'http://appengine.bravo9.com/copy-into-clipboard/clipboard.swf';

    if(!document.getElementById(flashId)) {
        var div = document.createElement('div');
        div.id = flashId;
        document.body.appendChild(div);
    }
    document.getElementById(flashId).innerHTML = '';
    var content = '<embed src="' + 
        clipboardSWF +
        '" FlashVars="clipboard=' + encodeURIComponent(text) +
        '" width="0" height="0" type="application/x-shockwave-flash"></embed>';
    document.getElementById(flashId).innerHTML = content;
}

唯一の欠点は、Flashを有効にする必要があることです。

ソースは現在死んでいます： http://bravo9.com/journal/copying-text-into-the-clipboard-with-javascript-in-firefox-safari-ie-opera-292559a2-cc6c-4ebf-9724 -d23e8bc5ad8a / （および Googleキャッシュ ）

49
ine

オンラインスプレッドシートは、Ctrl + C、Ctrl + Vイベントをフックし、非表示のTextAreaコントロールにフォーカスを移動し、そのコンテンツをコピーのために目的の新しいクリップボードのコンテンツに設定するか、イベントの貼り付け終了後にコンテンツを読み取ります。

Firefox、Safari、およびChromeでJavascriptを使用してクリップボードを読み取ることは可能ですか？

13
agsamek

それは2015年の夏であり、Flashを取り巻く混乱が非常に多いため、この質問に新しい回答を追加して、Flashの使用を完全に回避すると思いました。

clipboard.js は、テキストまたはhtmlデータをクリップボードにコピーできる便利なユーティリティです。 .jsを含めて、次のようなものを使用するだけで、非常に簡単に使用できます。

<button id='markup-copy'>Copy Button</button>

<script>
document.getElementById('markup-copy').addEventListener('click', function() {
  clipboard.copy({
    'text/plain': 'Markup text. Paste me into a rich text editor.',
    'text/html': '<i>here</i> is some <b>rich text</b>'
  }).then(
    function(){console.log('success'); },
    function(err){console.log('failure', err);
  });

});
</script>

clipboard.jsも GitHub にあります

10
a coder

2017年にこれを行うことができます（このスレッドはほぼ9歳なのでこれを言ってください！）

function copyStringToClipboard (string) {
    function handler (event){
        event.clipboardData.setData('text/plain', string);
        event.preventDefault();
        document.removeEventListener('copy', handler, true);
    }

    document.addEventListener('copy', handler, true);
    document.execCommand('copy');
}

そして今_copyStringToClipboard('Hello World')をコピーします

setData行に気づき、異なるデータ型を設定できるかどうか疑問に思ったら、答えはイエスです。

9
Chad Scira

Firefoxでは、クリップボードにデータを保存できますが、セキュリティ上の影響により、デフォルトでは無効になっています。 Mozilla Firefoxナレッジベースの "クリップボードへのJavaScriptアクセスの許可" で有効にする方法を参照してください。

Amdfanが提供するソリューションは、多数のユーザーがいて、ブラウザーを構成することがオプションではない場合に最適です。ユーザーが技術に精通している場合は、クリップボードが使用可能かどうかをテストし、設定を変更するためのリンクを提供できます。 JavaScriptエディター TinyMCE はこのアプローチに従います。

8
Troels Thomsen

CopyIntoClipboard（）関数はFlash 9で機能しますが、Flashプレーヤー10のリリースにより壊れているようです。新しいFlashプレーヤーで機能するソリューションを次に示します。

http://bowser.macminicolo.net/~jhuckaby/zeroclipboard/

複雑なソリューションですが、機能します。

5
Andomar

これらの解決策のどれも本当にうまくいかないと言わざるを得ません。受け入れられた回答からクリップボードソリューションを試してみましたが、Flash Player 10では動作しません。ZeroClipboardも試してみましたが、しばらくの間は非常に満足していました。

現在、自分のサイト（ http://www.blogtrog.com ）で使用していますが、奇妙なバグに気付いています。 ZeroClipboardの仕組みは、ページ上の要素の上部に非表示のFlashオブジェクトを配置することです。要素が移動すると（ユーザーがウィンドウのサイズを変更し、正しい位置に配置した場合など）、ZeroClipboardフラッシュオブジェクトが強打から抜け出し、オブジェクトをカバーしなくなることがわかりました。おそらく元の場所にまだ座っていると思います。彼らはそれを止めるか、それを要素に貼り付けることになっているコードを持っていますが、うまく機能していないようです。

だから... BlogTrogの次のバージョンでは、私がこれまでに見た他のすべてのコードハイライターを追って、クリップボードにコピーボタンを削除すると思います。 :-(

（dp.syntaxhiglighterのクリップボードへのコピーも壊れていることに気付きました。）

4
Dave Haynes

あまりにも古い質問ですが、私はどこにもこの答えを見ませんでした...

このリンクを確認してください：

http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard

みんなが言ったように、セキュリティ上の理由からデフォルトでは無効になっています。上記のリンクは、それを有効にする方法の手順を示しています（firefoxまたはuser.jsのabout：configを編集して）。

幸いなことに、「AllowClipboardHelper」というプラグインがあり、数回クリックするだけで作業が簡単になります。ただし、Firefoxでアクセスを有効にする方法については、Webサイトの訪問者に指示する必要があります。

3
Pablo

最新のdocument.execCommand（ "copy"）とjQueryを使用します。 このstackoverflowの回答を参照

var ClipboardHelper = { // as Object

copyElement: function ($element)
{
   this.copyText($element.text())
},
copyText:function(text) // Linebreaks with \n
{
    var $tempInput =  $("<textarea>");
    $("body").append($tempInput);
    $tempInput.val(text).select();
    document.execCommand("copy");
    $tempInput.remove();
}};

電話方法：

 ClipboardHelper.copyText('Hello\nWorld');
 ClipboardHelper.copyElement($('body h1').first());

// JQUERY DOCUMENT
;(function ( $, window, document, undefined ) {
  
  var ClipboardHelper = {

    copyElement: function ($element)
    {
       this.copyText($element.text())
    },
    copyText:function(text) // Linebreaks with \n
    {
        var $tempInput =  $("<textarea>");
        $("body").append($tempInput);
      
        //todo prepare Text: remove double whitespaces, trim
        
        $tempInput.val(text).select();
        document.execCommand("copy");
        $tempInput.remove();
    }
};

    $(document).ready(function()
    {
         var $body=$('body');
         
        $body.on('click', '*[data-copy-text-to-clipboard]', function(event) 
        {
            var $btn=$(this);
            var text=$btn.attr('data-copy-text-to-clipboard');
            ClipboardHelper.copyText(text);
        });
      
        $body.on('click', '.js-copy-element-to-clipboard', function(event) 
        {
            ClipboardHelper.copyElement($(this));
        });

    });


})( jQuery, window, document );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<span data-copy-text-to-clipboard=
"Hello
 World">
  Copy Text
</span>
<br><br>
<span class="js-copy-element-to-clipboard">
Hello
World 
Element
</span>
2
David from Studio.201

Githubの Clippy を使用して、必要に応じて、シンプルなFlashベースのボタンを使用しました。スタイリングを必要とせず、サーバー側に事前に貼り付けるものを挿入することに満足している場合は、問題なく動作します。

2
Dr1Ku

document.execCommand('copy')を使用します。 Chrome、Firefox、Edge、およびSafariの最新バージョンでサポートされています。

function copyText(text){
  function selectElementText(element) {
    if (document.selection) {
      var range = document.body.createTextRange();
      range.moveToElementText(element);
      range.select();
    } else if (window.getSelection) {
      var range = document.createRange();
      range.selectNode(element);
      window.getSelection().removeAllRanges();
      window.getSelection().addRange(range);
    }
  }
  var element = document.createElement('DIV');
  element.textContent = text;
  document.body.appendChild(element);
  selectElementText(element);
  document.execCommand('copy');
  element.remove();
}


var txt = document.getElementById('txt');
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
  copyText(txt.value);
})
<input id="txt" value="Hello World!" />
<button id="btn">Copy To Clipboard</button>
1
Trevor

Flashソリューションのわずかな改善は、swfobjectを使用してflash 10を検出することです。

http://code.google.com/p/swfobject/

そして、Flash 10として表示される場合は、javascriptを使用してShockwaveオブジェクトをロードしてみてください。 Shockwaveは、lingoのcopyToClipboard（）コマンドを使用して、クリップボード（すべてのバージョン）の読み取り/書き込みを行うことができます。

1
Travis

アドオンコードから：

他の誰かがchromeコードからそれを行う方法を探していた場合、ここで説明するようにnsIClipboardHelperインターフェイスを使用できます。 https://developer.mozilla.org/en-US/docs/Using_the_Clipboard

1
user1115652

フラッシュをサポートする場合、 https://everyplay.com/assets/clipboard.swf を使用し、flashvarsテキストを使用してテキストを設定できます。

https://everyplay.com/assets/clipboard.swf?text=It%20Works

それは私がコピーに使用するものであり、使用できるこれらのオプションをサポートしていない場合は追加として設定できます：

Internet Explorerの場合：window.clipboardData.setData（DataFormat、Text）およびwindow.clipboardData.getData（DataFormat）

DataFormatのTextとUrlを使用して、getDataとsetDataを使用できます。

データを削除するには：

DataFormatのファイル、HTML、画像、テキスト、およびURLを使用できます。 PS：window.clipboardData.clearData（DataFormat）;を使用する必要があります;

また、window.clipboardDataおよびswfフラッシュファイルをサポートしていないその他の場合は、windowsおよびmacのcommand + cでキーボードのcontrol + cボタンを使用することもできます。

1
User

http://www.rodsdot.com/ee/cross_browser_clipboard_copy_with_pop_over_message.asp Flash 10およびすべてのFlash対応ブラウザーで動作します。

また、ZeroClipboardが更新され、ページスクロールについて言及されたバグがFlashムービーを正しい場所に配置しなくなることを回避しています。

このメソッドは、ユーザーがボタンをクリックしてコピーすることを「必要」とするため、これはユーザーにとって便利であり、悪意のあることは何も発生していません。

1
rdivilbiss

クリップボードAPI は document.execCommand に代わるように設計されています。 Safariはまだサポートに取り組んでいるので、スペックが落ち着いてSafariが実装を完了するまでフォールバックを提供する必要があります。

const permalink = document.querySelector('[rel="bookmark"]');
const output = document.querySelector('output');
permalink.onclick = evt => {
  evt.preventDefault();
  window.navigator.clipboard.writeText(
    permalink.href
  ).then(() => {
    output.textContent = 'Copied';
  }, () => {
    output.textContent = 'Not copied';
  });
};
<a href="https://stackoverflow.com/questions/127040/" rel="bookmark">Permalink</a>
<output></output>

セキュリティ上の理由から、クリップボードの読み取りと書き込みにはクリップボード Permissions が必要になる場合があります。スニペットがSOで機能しない場合は、localhostまたは信頼できるドメインで試してください。

0
Josh Habdas

選択を保存するメモリグローバル変数を作成してみてください。そうすれば、他の関数が変数にアクセスして、たとえば貼り付けを行うことができます。

var memory = '';//outside the functions but within the script tag.

function moz_stringCopy(DOMEle,firstPos,secondPos) {

var copiedString = DOMEle.value.slice(firstPos, secondPos);
memory = copiedString;

}

function moz_stringPaste(DOMEle, newpos) {

    DOMEle.value = DOMEle.value.slice(0,newpos) + memory + DOMEle.value.slice(newpos);

}
0
David Barrett