【JavaScript】テキストエリアの文字列をクリップボードにコピーする

最終的に実装しないことになりましたが、今後使うかもしれないので備忘録としてまとめ。
JavaScript でテキストをクリップボードにコピーする方法です。

参考にさせていただいた記事はこちらから。

[JavaScript]クリップボードを使ったコピーとペースト – Qiita
https://qiita.com/butakoma/items/642c0ec4b77f6bb5ebcf

 

サンプルコードは下記のとおりです。
まず、HTML は下記のように記述します。

<input type="text" id="example" value="[テキスト]" />

上記のサンプルでは、<input> 要素を用意しましたが、<textarea> でも大丈夫とのことです。
また、typehidden でも問題なく動作しました。

で、JavaScript のコードがこちらです。

let textarea = document.getElementById("example");
textarea.select();
document.execCommand("copy");

1行目の document.getElementById() で文字列を取得したいテキスト要素を取得します。
その後、2行目の select() メソッドでその要素を全選択した後、3行目の document.execCommand("copy"); で、選択している要素のテキストをクリップボードにコピーしています。
処理としてはこれだけです!
その後、テキストエディタなどでペーストの処理を行ったところ、無事に指定した要素のテキストがコピーされていたことを確認できました!

しかし、document.execCommand() ですが、現在は廃止されているようです。
こちらのサイトで、「まだいくつかのブラウザーで動作するかもしれませんが、いつ削除されてもおかしくないので、使わないようにしましょう」との記載がありました。
今回記事に書いておいて何ですが、別の方法を探したほうが良いでしょう。

 

以上、JavaScript でテキストエリアの文字列をクリップボードにコピーする方法についてでした。
ご参考になれば幸いです。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG