壊れにくいSSDの選び方

記事内に広告を含む場合があります

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

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

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

 

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

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

 

スポンサーリンク
この記事を書いた人:まちゃ
ガジェット好き 自作PC歴20年超え スマホゲームのエンジニア アニメ・ゲーム好き

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

clipboard.js

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

 

 

 

 

 

 

購入して本当によかった、おすすめガジェット
購入して本当によかった、おすすめガジェット

おもしろそうなガジェットや生活が便利・快適になりそうなのを見つけると、ついついポチってしまいます。

そんな様々なガジェットの中から、実際に購入して良かったと感じたおすすめのガジェットを紹介します。

\ 今すぐチェック /
Amazonで安く買い物する方法

ガジェットなどをAmazonでお得に買い物するには、Amazonギフト券にあらかじめチャージしてから購入するのがおすすめです。

Amazonギフト券は現金でチャージするたびにポイントが 最大2.5% 貯まります。

現金派クレカを持てなくても、Amazonギフト券を活用するとお得です!

 
\ 最大2.5%のポイントバック /
現金なので安心
クレカ無くてもOK
JavaScript
このページをシェアする

コメント

目次へ
タイトルとURLをコピーしました