質問

現在、いくつかのWebサイトでは、JavaScriptのサービスを Tynt の JavaScript サービスを使って、コピーしたコンテンツにテキストを追加しているサイトもあります。

これを使用してサイトからテキストをコピーし、貼り付けると、テキストの下に元のコンテンツへのリンクが表示されます。

Tynt は、これが発生すると追跡します。これは巧妙なトリックで、よくできています。

クリップボードを操作しようとするのではなく (これは古いバージョンの IE でのみデフォルトで可能で、常にオフにすべきです)、実際の選択部分を操作するのです。

そのため、テキストのブロックを選択すると、余分なコンテンツは隠された <div> として追加され、選択範囲に含まれます。貼り付けると、余分なスタイルは無視され、余分なリンクが表示されます。

これは実際には単純なテキスト ブロックではかなり簡単ですが、異なるブラウザで複雑な HTML 全体で可能なすべての選択を考慮すると、悪夢となります。

私は Web アプリケーションを開発しています。誰にもコピーされたコンテンツを追跡されたくないので、追加情報には、単なるリンクではなく、何か文脈的なものが含まれていることを望みます。この場合、Tynt のサービスはあまり適切ではありません。

同様の機能を提供し、内部アプリケーション データを公開しない、オープン ソースの JavaScript ライブラリ (jQuery プラグインまたは同様のもの) をご存知の方はいらっしゃいますか?

どのように解決するのですか？

2022年最新情報

リッチ テキスト フォーマットを処理する、より複雑なソリューションです。プレーン テキストのみを扱うのであれば、2020 年のソリューションがまだ適切です。

const copyListener = (e) => {
  const range = window.getSelection().getRangeAt(0),
    rangeContents = range.cloneContents(),
    pageLink = `Read more at: ${document.location.href}`,
    helper = document.createElement("div");

  helper.appendChild(rangeContents);

  event.clipboardData.setData("text/plain", `${helper.innerText}\n${pageLink}`);
  event.clipboardData.setData("text/html", `${helper.innerHTML}<br>${pageLink}`);
  event.preventDefault();
};
document.addEventListener("copy", copyListener);

#richText {
  width: 415px;
  height: 70px;
  border: 1px solid #777;
  overflow: scroll;
}

#richText:empty:before {
  content: "Paste your copied text here";
  color: #888;
}

<h4>Rich text:</h4>
<p>Lorem <u>ipsum</u> dolor sit <b>amet</b>, consectetur <i>adipiscing</i> elit.</p>
<h4>Plain text editor:</h4>
<textarea name="textarea" rows="5" cols="50" placeholder="Paste your copied text here"></textarea>
<h4>Rich text editor:</h4>
<div id="richText" contenteditable="true"></div>

2020年最新情報

すべてに対応するソリューション 最近の ブラウザで動作します。

このソリューションでは、リッチ テキスト エディタに貼り付ける場合でも、リッチ テキストの書式設定 (太字や斜体など) が除去されることに注意してください。

document.addEventListener('copy', (event) => {
  const pagelink = `\n\nRead more at: ${document.location.href}`;
  event.clipboardData.setData('text/plain', document.getSelection() + pagelink);
  event.preventDefault();
});

Lorem ipsum dolor sit <b>amet</b>, consectetur <i>adipiscing</i> elit.<br/>
<textarea name="textarea" rows="7" cols="50" placeholder="paste your copied text here"></textarea>

[古い記事 - 2020年アップデート前】の記事です。］

コピーしたWebテキストに余分な情報を追加するには、主に2つの方法があります。

1. 選択範囲を操作する

を見ることです。 copy event を監視し、追加情報を含む隠しコンテナを dom に追加し、選択範囲をそれに拡張します。

このメソッドは この記事 によって c.bavota . こちらもご覧ください ジットビット のバージョン を使用すると、より複雑なケースに対応できます。

• ブラウザの互換性 : すべての主要なブラウザ、IE > 8。
• デモ : jsFiddleのデモ .
• Javascriptのコード :

    function addLink() {
        //Get the selected text and append the extra info
        var selection = window.getSelection(),
            pagelink = '<br /><br /> Read more at: ' + document.location.href,
            copytext = selection + pagelink,
            newdiv = document.createElement('div');

        //hide the newly created container
        newdiv.style.position = 'absolute';
        newdiv.style.left = '-99999px';

        //insert the container, fill it with the extended text, and define the new selection
        document.body.appendChild(newdiv);
        newdiv.innerHTML = copytext;
        selection.selectAllChildren(newdiv);

        window.setTimeout(function () {
            document.body.removeChild(newdiv);
        }, 100);
    }

    document.addEventListener('copy', addLink);

1. クリップボードの操作

を見ることです。 copy event を監視し、クリップボードデータを直接修正することです。これは clipboardData プロパティを使って可能です。なお、このプロパティはすべての主要なブラウザで read-only を使用します。 setData メソッドはIEでのみ利用可能です。

• ブラウザの互換性 : IE > 4.
• デモ : jsFiddleのデモ .
• Javascriptのコード :

    function addLink(event) {
        event.preventDefault();

        var pagelink = '\n\n Read more at: ' + document.location.href,
            copytext =  window.getSelection() + pagelink;

        if (window.clipboardData) {
            window.clipboardData.setData('Text', copytext);
        }
    }

    document.addEventListener('copy', addLink);