コピーボタン

2023年2月5日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回はクリックするだけで特定の文字列をコピーできるボタンを作ってみたいと思います。

うちのブログではGoogle Fontsの記事で使っています。

参考：フーノページ｜JavaScript : テキストのコピーボタンを実装。

参考：Qiita｜[JavaScript]クリップボードを使ったコピーとペースト

テキストエリアからコピー

① テキストエリアを設置します。

<textarea>コピーさせたいテキスト</textarea>

② ボタンを設置し、onclick属性を設定します。

<textarea>コピーさせたいテキスト</textarea>
			  
<button onclick="copy()">コピーする</button>

③ 以下のスクリプトを記述します。

function copy() {
  var text = document.getElementsByTagName("textarea")[0];
  text.select();
  document.execCommand("copy");
}

getElementsByTagName("textarea")でテキストエリアの内容を取得

selectで取得した内容を選択

execCommand("copy")でコピー

だそうです。勉強になります！

特定の文字列をコピー

① コピーさせたい文字列を記述します。idを適当に設定します。

<p id="original">こぴーさせたいてきすと</p>

② ボタンを設置し、onclick属性を設定します。

<p id="original">こぴーさせたいてきすと</p>
			  
<button onclick="copy2()">コピーする</button>

③ 以下のスクリプトを記述します。

function copy2() {
  var text = document.getElementById("original").innerText;

  var area = document.createElement("textarea");

  area.textContent = text;

  document.body.appendChild(area);

  area.select();
  document.execCommand("copy");

  document.body.removeChild(area);
}

execCommand("copy")はテキストエリアかinput要素にしか使えないので、

createElement("textarea")でテキストエリアを生成

appendChild(area)でドキュメントに追加

execCommand("copy")でコピー

removeChild(area)で生成したテキストエリアを消す

なんだそうです。難しい・・・

まとめ

Ctrl＋C → Ctrl＋Vでいいとか言わない。

ペーストボタンはどうやってつくるのだろう。