web-dev-qa-db-ja.com

フラッシュなしでクリップボードにコピー

クリップボードにコピーするための多くのソリューションを見つけましたが、それらはすべてフラッシュを使用するか、Webサイト側で使用します。私はフラッシュなしで自動的にクリップボードにメソッドをコピーし、ユーザー側のために探しています、それはユーザースクリプトともちろんクロスブラウザ用です。

javascriptjqueryclipboard
90
Black_Sun

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

31
Michael Borgwardt

私はフラッシュソリューションを試しましたが、私も好きではありませんでした。複雑すぎて遅すぎます。私がやったのは、テキストエリアを作成し、そこにデータを入れて、ブラウザの「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つ作成するだけです。唯一の欠点は、サイトにsiteいテキストエリアが表示されることです。 style = "display：none"を使用すると、コピーソリューションは機能しません。

25
Julio Saito

clipboard.js は、Flashを必要とせずにクリップボードにコピーするためにリリースされたばかりです

こちらで実際にご覧ください> http://zenorocha.github.io/clipboard.js/#example-action

15
malditojavi

ついにここに！（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

10
Hovis Biddle

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();
1
mrBorna

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')
0
odinho - Velmont