javascriptでクリップボードへの文字列のコピー

Question

実現したいこと

HTMLでコピーボタンを用意しておいて、ボタンが押されたら文字列をクリップボードへコピーをしたいのですがどうしたら上手くコピーでますでしょうか？

<button class="copyBtn" onclick="copyClip()">コピー</button>
<textarea id="copyTxt"><?php echo $row['contents']; ?></textarea>

<script type="text/javascript">
    function copyClip(){
        var Element = document.getElementById("copyTxt");
        Element.select();
        document.execCommand("copy");
    }
</script>

javascriptの経験が殆どありませんので、なるべく初心者に分かりやすい簡潔なコードで教えていただけますと幸いです。

追記

#copyTxt{
display: none;

//以下の方法で画面外に置く以外の方法でなにかありますでしょうか？
position: absolute;
left: -99999px;
}

CSSを適用しないで表示にするとコピーはできる状態となります。

Comments

[m.ts10806]

うまくいかないとは？
質問ではなく作業依頼ということですよね。

Answer 1

いちどPHPはわすれてください
css追記しました

<style>
#copyTxt{
position:absolute;
top:-999;
}
</style>
<script>
function copyClip(){
  var Element = document.getElementById("copyTxt");
  Element.select();
  document.execCommand("copy");
}
</script>

<button class="copyBtn" onclick="copyClip()">コピー</button>
<textarea id="copyTxt">
hogehoge
fugafuga
12345678
</textarea>

見た感じ、テキストエリアのすべての文字が選択されて
クリップボードにコピーされているようです
どういった環境で実行した時にどうやって確認してできてないと判断しましたか？

Comments

[rinrin1137]

もしかすると、CSSでdisplay:noneを設定して非表示にしているのが原因でしょうか？

[rinrin1137]

displya:noneの設定を外して、表示した状態では問題なくコピーができました！
なにかいい方法はないものでしょうか？

[Y.H.]

> CSSでdisplay:noneを設定して非表示にしている
条件として重要なことなので質問に記載ください。
ほかに条件があればそれも記載ください。

[yambejp]

見せたくないということですね？
css追記してあります

[rinrin1137]

コピーするテキストは非表示状態にしておきたいのですが、画面外に置く以外でなにか方法はありますでしょうか？

[yambejp]

> 画面外に置く以外

非表示にする選択肢がOKで、画面外に飛ばすのがNGな理由があれば
提示ください

[rinrin1137]

特に理由はありませんが、単純なdisplay:noneでできればと思っておりました。
ちなみにPHPのループで回すとテーブルの該当行のテキストがコピーできませんでした・・・。

[yambejp]

> 単純なdisplay:noneでできればと思っておりました。

非表示のものは選択できないので無理です
透明度で調整する手もありますが余計なものが表示されるので多分NG

> PHPのループで回すとテーブルの該当行のテキストがコピーできません

具体的なtextareaの中身を質問文に追記してください

[m.ts10806]

わざわざ非表示textareaとか使わなくても空divでもなんでも作って用が済んだら削除すれば良いのでは。
https://qiita.com/simiraaaa/items/2e7478d72f365aa48356

[yambejp]

> 空divでもなんでも作って

削除するならtextareaでも良いような気が・・・

[m.ts10806]

ずっと置いておく非表示要素でやろうとしなくても という意味でした。目的とかそのあたりがよく分からないのでなんとも言えないところはありますけどね。

[rinrin1137]

非表示なものはやはり選択できないのですね・・・。
勉強になりました。

[yambejp]

> PHPのループで回す

うんぬんは結局解決した（もしくはどうでもよくなった）のでしょうか？