HTMLタグが含まれている文字列や長文をクリップボードにコピーさせたい時は、一度textareaに出力させて、textareaの値をクリップボードに反映させるのが簡単です。
ただ、画面にそのtextareaを表示させたく無い場合、「display : none」などで非表示にしてしまうと、そのままではクリップボードコピーが出来なかったので対応してみました。
このページではtextareaを非表示のままで、そのtextareaの値をクリップボードコピーする方法を紹介します。
クリップボードコピーには、テキストをクリップボードにコピーできるjQueryプラグイン「clipboard.js」を使用しています。
使用したプラグイン/ライブラリ
クリップボードコピーには、「jQuery本体」と「clipboard.js」を使用しました。
今回使用したバージョンは以下のとおりです。
- jQuery (3.2.1)
- clipboard.js (2.0.0)
どちらもCDNで公開されているので、特に気にしないのであればダウンロードしないでそのまま使えるので簡単に試せます。
実装例
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プラグイン
コメント