jQueryでテキストコピーボタンを数行で実装する手順

ボタンを押すと、テキストがコピーされる的な・・・
そういうボタンを作りたいことってないですか？

実を言うと、jQuery ならそういうのでも数行くらいで作れます。

ここでは忘備録も兼ね、そういうテキストコピーボタンを jQuery で作る手順まとめました。

長いテキストをストレスなくコピーしてもらいたいとか、そういう時に役立つはずです。

このページの目次

手順１．まずはjQueryを読み込もう
- 必要なら FontAwesome も入れておとくと便利
手順２．コピーテキストボタンを用意＆実装
ここまでのまとめ

手順１．まずはjQueryを読み込もう

まず jQuery が必須なので、最低限読み込み

あとレイアウト調整に便利なので Bootstrap とかも読み込んどきます。(任意)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

1 2	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

やっぱりCDNでインクルードするのが楽です。

あともしCDNじゃなくて、直読みしたいなどの場合・・・

次の公式サイトから直ダウンロードもできます。

Bootstrap　＝＞ https://getbootstrap.com/docs/4.3/getting-started/download/
jQuery　＝＞ https://jquery.com/download/

どっちで読み込むかはお好きな方でどうぞ

必要なら FontAwesome も入れておとくと便利

あとこれは必ずってわけじゃないんですが、、、

ボタンのアイコンをカスタマイズするなら FontAwesome も必要です。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/fontawesome.min.css" />

1	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/fontawesome.min.css" />

あとボタン用のアイコンは次ページから色々探せます。

アイコン検索　：　https://fontawesome.com/icons

検索で "clip" とか "clipboard" で検索すれば、よさげなアイコンが見つかるはず

手順２．コピーテキストボタンを用意＆実装

そうしたら次に、テキスト要素とボタン要素を用意します。

ボタンがクリックされたら、その横のテキストがコピーされる的なイメージ

例えば APIキーみたいな超長いテキストをコピー対応させたいとしましょう。

その場合を例に出すなら、次のようなタグを用意してください。（Bootstrap使用）

<div>
  APIキー : 
  <span class="text">
    tbsUQRZjaHf9p4iHHet3
  </span>
  <lable class="btn btn-text p-0 m-0 copy-text-btn">
    <i class="fas fa-paste"></i>
  </label>
</div>

<div>

APIキー :

tbsUQRZjaHf9p4iHHet3

</span>

</label>

</div>

このタグで重要なポイントは次の３つ

必ず全体をdivタグで囲んで親要素を作る
テキスト要素に text クラスを付与
ボタンには copy-text-btn クラスを付与

これ以外のテキストとか、アイコンは好きに改変してOKです。

そうしたら最後に、コピーボタンがクリックされたときの処理を追加

window.addEventListener('load', function(){
  /// コピーテキストボタンを実装
  $('.copy-text-btn').on('click',function(){
    /// テキスト要素を選択＆クリップボードにコピー
    var textElem = $(this).parent().find('.text');
    window.getSelection().selectAllChildren(textElem[0]);
    document.execCommand("copy");
    
    /// コピー完了した後の処理
    /// トースト通知と化すると親切かも...\
  });
});