web-dev-qa-db-ja.com

ChromeでjQuery / jsを使用してクリップボードにコピーします

JavaScriptでクリップボードにコピーするにはどうすればよいですか？ または jQueryを使用してクライアントのクリップボードにテキストをコピーする方法は？ 、私は範囲を狭めています：

調子：

  1. googleで正常に動作しますChrome（クロスブラウザならいいですが、必要ではありません）
  2. フラッシュなし

そのような解決策や回避策はありますか？

javascriptjquerygoogle-chromeclipboardcopy-paste
34
Sam Su

Githubで別の素晴らしいリポジトリを見つけました。

クリップボードへのモダンなコピー。フラッシュなし。わずか3kbのgzip圧縮

https://github.com/zenorocha/clipboard.js

ブラウザサポート：

14
Sam Su

変数文字列は、以下のjsコードを使用してクリップボードにコピーできます。

var text = 'text to copy';
var copyFrom = $('<textarea/>');
copyFrom.css({
 position: "absolute",
 left: "-1000px",
 top: "-1000px",
});
 copyFrom.text(text);
 $('body').append(copyFrom);
 copyFrom.select();
 document.execCommand('copy');
7
Suneth Senanayake

実際にこれを理解している人のために、私はそれをchrome @JulianGregoireの答えに基づいて動作するようにしました。

私の意見では、コードを少し改善するために書き直しました。

el.onclick = function () {
    var copy = function (e) {
        e.preventDefault();
        console.log('copy');
        var text = "blabla"
        if (e.clipboardData) {
            e.clipboardData.setData('text/plain', text);
        } else if (window.clipboardData) {
            window.clipboardData.setData('Text', text);
        }
    }
    window.addEventListener('copy', copy);
    document.execCommand('copy');
    window.removeEventListener('copy', copy);
}
5
Joel Harkes

注意：JulienGrégoireとまったく同じスクリプトを試しましたが、oncopyイベントリスナーをトリガーしませんでした。その理由は、bodyタグにユーザーが選択したCSSがあったからです。

したがって、必ず削除するか、イベントリスナーがアタッチされている要素でinitialに設定してください。

例： https://jsfiddle.net/faimmedia/jsLfnnvy/80/

0
Tim

ノックアウトを使用している場合、私のように（何らかの理由で私はまだです）、この質問/回答をご覧ください：

KnokoutJSとClipboardJSを連携させる方法

0
João Antunes