LoginSignup
2
5

More than 5 years have passed since last update.

リンクをクリックしたらクリップボードにコピーする

Last updated at Posted at 2016-09-25

やりたいこと

ダウンローダーへリンクを渡すためにコピーすることが多い(面倒くさい!)
リンクをクリックするだけでコピーしたい

確認環境

Chrome 54b + Tampermonkey
Document.execCommand - MDN見る限り、最新ブラウザなら動きそう

ソース

userscript.js
(function() {
    'use strict';

    // リンクを抽出
    var links = document.querySelectorAll('a[title="ダウンロード"]');
    links.forEach(function(link) {
        // リンククリックしたらコピー
        link.addEventListener('click', function(e) {
            e.preventDefault();
            // コピーしたいテキストを渡す
            copyText( link.getAttribute('href') );
        });
    });
})();

// リンクをコピー
function copyText(txt) {
    // ダミーのテキスト要素を作成
    var span = document.createElement('span');
    span.textContent = txt;

  // ボディタグにテキスト要素を追加
    var b = document.getElementsByTagName('body')[0];
    b.appendChild(span);

    // 選択済みテキストを解除    
    var s = window.getSelection();
    if (s.rangeCount > 0) s.removeAllRanges();

    // 選択範囲にリンクを追加
    var r = document.createRange();
    r.selectNode(span);
    s.addRange(r);

    // クリップボードにコピー
    document.execCommand('copy');

    // ダミー要素の削除
    span.remove();
}

参考

Chrome 43からcutおよびcopyコマンドが使えます - Qiita
addRange - MDN

2
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
5