Flashなしでクリップボードにコピー

私はクリップボードにコピーするための多くの解決策を見つけましたが、それらはすべてフラッシュを使用するか、ウェブサイト側のいずれかです。Flashを使用せずに自動的にクリップボードにメソッドをコピーする方法を探しています。ユーザー側の場合は、ユーザースクリプト用で、もちろんクロスブラウザ用です。

フラッシュがなければ、ほとんどのブラウザでは不可能です。ユーザーのクリップボードには、パスワードやクレジットカード番号などが含まれる可能性があるため、セキュリティ関連のリソースです。したがって、ブラウザはJavascriptへのアクセスを正しく許可しません（一部は、ユーザーが確認したことを示す警告または署名付きのJavascriptコードを許可しますが、クロスブラウザではありません）。

フラッシュソリューションを試してみましたが、あまり好きではありませんでした。複雑すぎて遅すぎる。私がしたことは、textareaを作成し、そこにデータを入れて、ブラウザーの「CTRL + C」の動作を使用することでした。

jQuery JavaScript部分：

// catch the "ctrl" combination keydown
$.ctrl = function(key, callback, args) {
    $(document).keydown(function(e) {
        if(!args) args=[]; // IE barks when args is null
        if(e.keyCode == key && e.ctrlKey) {
            callback.apply(this, args);
            return false;
        }
    });
};

// put your data on the textarea and select all
var performCopy = function() {
    var textArea = $("#textArea1");
    textArea.text('PUT THE TEXT TO COPY HERE. CAN BE A FUNCTION.');
    textArea[0].focus();
    textArea[0].select();
};

// bind CTRL + C
$.ctrl('C'.charCodeAt(0), performCopy);

HTML部分：
<textarea id="textArea1"></textarea>

次に、コピーする内容を「ここにコピーするテキストを入力してください」に入力します。機能することができます。範囲。私にとってはうまくいきます。CTRL + Cの組み合わせを1つ作成するだけです。唯一の欠点は、サイトに醜いテキストエリアが表示されることです。style = "display：none"を使用すると、コピーソリューションは機能しません。

clipboard.jsがリリースされたばかりで、Flashを使用せずにクリップボードにコピーできます

ここで実際に見てください> http://zenorocha.github.io/clipboard.js/#example-action

ついに登場！（SafariまたはIE8をサポートしていない限り... -_-）

Flashなしでクリップボードアクションを実際に処理できるようになりました。関連ドキュメントは次のとおりです。

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

https://developers.google.com/web/updates/2015/04/cut-and-copy-commands?hl=en

https://msdn.microsoft.com/en-us/library/hh801227%28v=vs.85%29.aspx#copy

^{一方で待ちかねのXbrowserをサポートするためにクリップボードAPI ...}

IEは、クリップボードへのアクセスをユーザーに1回だけ要求します。
Safari（執筆時点では5.1）はexecCommand、copy/cut

/**
 * CLIPBOARD
 * https://stackoverflow.com/a/33337109/383904
 */
const clip = e => {
  e.preventDefault();
  
  const cont = e.target.innerHTML;
  const area = document.createElement("textarea");
  
  area.value = e.target.innerHTML; // or use .textContent
  document.body.appendChild(area);
  area.select();
 
  if(document.execCommand('copy')) console.log("Copied to clipboard");
  else prompt("Copy to clipboard:\nSelect, Cmd+C, Enter", cont); // Saf, Other
  
  area.remove();
};


[...document.querySelectorAll(".clip")].forEach(el => 
  el.addEventListener("click", clip)
);

<a class="clip" href="#!">Click an item to copy</a><br>
<a class="clip" href="#!"><i>Lorem</i></a><br>
<a class="clip" href="#!"><b>IPSUM</b></a><br>

<textarea placeholder="Paste here to test"></textarea>

すべてのブラウザー（"plain/text"私がテストした限りMIMEタイプのみを処理できるFirefoxを除く）は、クリップボードAPIを実装していません。つまり、Chromeでクリップボードイベントを読み取ろうとして

var clipboardEvent = new ClipboardEvent("copy", {
        dataType: "plain/text",
        data: "Text to be sent to clipboard"
});

throws：Uncaught TypeError：Illegalコンストラクタ

ブラウザとクリップボードの間で起こっている信じられないほどの混乱の最良のリソースは、ここ（caniuse.com）で見ることができます（→ 「メモ」の下のコメントに従ってください）。
MDNによると、基本的なサポートはすべてのブラウザーで「（はい）」であり、少なくともAPIが機能することを期待しているため不正確です。

HTMLページにローカルなクリップボードを使用できます。これにより、HTMLページ内でコンテンツをコピー/切り取り/貼り付けできますが、サードパーティのアプリケーションとの間、または2つのHTMLページ間ではできません。

これは、これを行うカスタム関数を作成する方法です（ChromeおよびFirefoxでテスト済み）。

これは、これを行う方法を示すFIDDLEです。

参考のためにここにもフィドルを貼り付けます。

HTML

<p id="textToCopy">This is the text to be copied</p>
<input id="inputNode" type="text" placeholder="Copied text will be pasted here" /> <br/>

<a href="#" onclick="cb.copy()">copy</a>
<a href="#" onclick="cb.cut()">cut</a>
<a href="#" onclick="cb.paste()">paste</a>

JS

function Clipboard() {
    /* Here we're hardcoding the range of the copy
    and paste. Change to achieve desire behavior. You can
    get the range for a user selection using
    window.getSelection or document.selection on Opera*/
    this.oRange = document.createRange();
    var textNode = document.getElementById("textToCopy");
    var inputNode = document.getElementById("inputNode");
    this.oRange.setStart(textNode,0);
    this.oRange.setEndAfter(textNode);
    /* --------------------------------- */
}

Clipboard.prototype.copy = function() {
    this.oFragment= this.oRange.cloneContents();
};

Clipboard.prototype.cut = function() {
    this.oFragment = this.oRange.extractContents();
};

Clipboard.prototype.paste = function() {
    var cloneFragment=this.oFragment.cloneNode(true)
    inputNode.value = cloneFragment.textContent;
};

window.cb = new Clipboard();

document.execCommand('copy')あなたがしたいことをします。しかし、このスレッドには、問題なく直接使用できる例はなかったので、ここに示します。

var textNode = document.querySelector('p').firstChild
var range = document.createRange()
var sel = window.getSelection()

range.setStart(textNode, 0)
range.setEndAfter(textNode)
sel.removeAllRanges()
sel.addRange(range)
document.execCommand('copy')

回避策はありません。フラッシュを使用する必要があります。フラッシュ（swf）ファイルを使用してブラウザー間のコピーと貼り付けを提供するjquery.copyと呼ばれるJQueryプラグインがあります。これは、私のブログの構文ハイライターが機能する方法に似ています。

jquery.copy.jsファイルを参照すると、データをクリップボードにプッシュするために必要なことはすべて次のようになります。

$.copy("some text to copy");

素敵で簡単です;）