tableのセル(tbタグ)のクリックでテキストをクリップボードにコピー(右クリック対応) [JavaScript]

JavaScript
投稿日:
カテゴリー JavaScript

tableのセル（tb）をクリック（左クリック・右クリック対応）すると、そのセルの中のテキストをクリップボードにコピーするJavaScriptを作りました。

ソースコード

デフォルトの設定では、右クリックでコピーするようにしています。左クリックでコピーしたい場合は、2行目を var mode = 0; にしてください。また、クリックした時、わかりやすいように一瞬だけセルの背景色を変えています。

//左クリックと右クリックのどちらを有効にするか
var mode = 1; //左クリック:0 右クリック:1
//クリックされた時のセルの背景色
var bg = '#fffacd';
//クリックされたセルの背景色を元に戻すまでの時間(ms)
var bg_time = 250; //0.25秒

//ページが表示されたら実行
window.onload = function(){
    if(mode == 0){
        //左クリックが有効の場合
        //tdタグがクリックされた時、関数copyTextを実行
        const els = document.querySelectorAll('td');
        els.forEach(e => {
            e.addEventListener("click", copyText, false)});
    }else if(mode == 1){
        //右クリックが有効の場合
        //tdタグが右クリックされた時、関数copyTextを実行
        const els = document.querySelectorAll('td');
        els.forEach(e => {
            e.addEventListener('contextmenu', function(e){
                copyText(e);
                //右クリックメニューを表示させない
                e.preventDefault();
            }, false)});
    }
};

//クリックされたセルのテキストをクリップボードにコピー
function copyText(e){
    //クリックされたセル
    var td = e.target;
    //コピー用に用意するテキストエリア
    var copyform = document.createElement("textarea");

    //クリックされたセルの中のテキストをテキストエリアにセット
    copyform.value = td.innerText;
    //ページ内にテキストエリアを追加
    document.body.appendChild(copyform);
    //テキストエリアのテキストを選択
    copyform.select();
    //選択しているテキストをクリップボードにコピー
    document.execCommand("copy");
    //追加したテキストエリアを削除
    document.body.removeChild(copyform);

    //クリックされたセルの背景色を変数bgに代入
    var bg_ex = td.style.background;
    //クリックされたセルの背景色を変える
    td.style.background = bg;
    //○ミリ秒後にクリックされたセルの背景色を元に戻す
    setTimeout(function(){
            td.style.background = bg_ex;
        }, bg_time);
}

コピー用のテキストエリアを追加してコピーして消すやり方にしていますが、もっとスマートな方法があるかもしれません。画面がブレるなどの不具合はありません。

サンプル

右クリックでテキストをクリップボードにコピーします。

テスト1あいうえお2020/01/01
テスト2かきくけこ2020/01/02
テスト3さしすせそ2020/01/03

確認用テキストエリア（ここに貼り付けてください）

おわりに

業務でtableの中のテキストをコピーする作業があり、いちいち選択してコピーするのが煩わしかったので、今回JavaScriptで作ってみました。

左クリックでコピーするようにすると、セル（tb）の中のテキストの一部を選択することができなくなります。そのため、右クリックでコピーするようにしたほうが融通が利くかと思います。td上では右クリックのメニューは開かないようにしていますが、td以外では右クリックのメニューが開きます。以上です。

広告