【javascript】クリックしたらコピーをさせる方法

クリックしたらコピーってどうやって実装するんだろうと思った時の備忘録

クリックしたらコピーの機能の実装方法

execCommandを使って実装する

<input id="input" type="text" value="コピー対象の文言">
<button id="copy">Copy</button>

<script>
function copy() {
  var copyTarget = document.querySelector("#input");// コピー対象の要素を取得
  copyTarget.select();// テキストを取得
  console.log(copyTarget);// input内のテキストを選択状態にする
  document.execCommand("copy");// クリップボードにコピー
}
document.querySelector("#copy").addEventListener("click", copy);
</script>

どういう挙動しているの気になって調べたんだけど

copyTarget.select()でテキストをマウスカーソルを使って選択(青反転)状態にしてdocument.execCommand("copy")でコピー(Ctr+C)の機能をjavascriptでやっているだけみたい

copyTarget.select()の後にdocument.execCommand("copy")が来たから繋がりが見えなくて、どこかに値を保存していると思ってた