非表示のtextareaの値をクリップボードにコピーする(clipboard.js)

HTMLタグが含まれている文字列や長文をクリップボードにコピーさせたい時は、一度textareaに出力させて、textareaの値をクリップボードに反映させるのが簡単です。

ただ、画面にそのtextareaを表示させたく無い場合、「display : none」などで非表示にしてしまうと、そのままではクリップボードコピーが出来なかったので対応してみました。

 

このページではtextareaを非表示のままで、そのtextareaの値をクリップボードコピーする方法を紹介します。

クリップボードコピーには、テキストをクリップボードにコピーできるjQueryプラグイン「clipboard.js」を使用しています。

 

使用したプラグイン/ライブラリ

クリップボードコピーには、「jQuery本体」と「clipboard.js」を使用しました。

今回使用したバージョンは以下のとおりです。

1. jQuery (3.2.1)
2. clipboard.js (2.0.0)

 

どちらもCDNで公開されているので、特に気にしないのであればダウンロードしないでそのまま使えるので簡単に試せます。

 

＞＞https://clipboardjs.com/

 

実装例

JavaScriptファイルを読み込む

clipboard.js は jQueryのプラグインなので先にjQueryを記載して順に読み込むようにします。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>

 

 

ボタンとtextareaの設定

コピーのトリガーとなるボタンとコピーされるtextareaを用意します。

コピーして無反応だと寂しいので、コピー成功後に表示する文字列を用意しました。

 

<button class="btn btn-clipboard" data-clipboard-target="#clipboard-copy-target">コピーする</button>
<span class="clipboard-success">コピーしました</span>
<textarea id="clipboard-copy-target" style="display : none;">
コピーしたい内容
</textarea>

buttonの「data-clipboard-target」でコピーする対象のtextareaのidを指定します。

 

 

CSS 設定

コピー成功時の文字列を非表示にするなどのstyleを設定しておきます。クリッピボードコピーとは直接関係は無いですね。

<style>
    .btn-clipboard {
        display: inline-block;
    }
    .clipboard-success {
        display: none;
        margin: 0 0 0 8px;
        font-size: .9em;
    }
</style>

 

clipboard.js の設定

今回のメインとなる実装です。

通常であれば、トリガーとなるCSSのclass「.btn-clipboard」を指定するだけでクリップボードコピーが出来ます。

コピーするtextareaが非表示になって取得できないので、クリップボードに渡すtextをjQueryを使って手動で取得して返すようにしました。

引数の「trigger」はbuttonが渡されるので属性値からtextareaのidを取得できます。

 

<script>
    $(function(){
        let clipboard = new ClipboardJS('.btn-clipboard', {
            text: function(trigger) {
                let targetSelector = trigger.getAttribute("data-clipboard-target");
                return $(targetSelector).val();
            }
        });
        /* コピーが成功した時の処理 */
        clipboard.on('success', function(e) {
            $('.clipboard-success').fadeIn(1000).fadeOut(1000);
        });
    });
</script>

 

 

終わり

clipboard.js を使用するとクリップボードコピーが簡単に実装できて良いですね。

一昔前はFlashやFrameworkなどを使う必要がありましたが、JavaScriptで実装できるようになって良い環境になりました。

 

非表示のtextareaの値をコピーできれば、JavaScriptで生成した文字列なども一度textareaに出力してそれをコピーさせるなど応用が効きそうですね。

「clipboard.js」は、とても簡単に実装できるので、ぜひお試しください。

 

 

使用したjQueryプラグイン

clipboard.js

A modern approach to copy text to clipboard. No Flash. No frameworks. Just 3kb gzipped

zenorocha.github.io