【JavaScript】要素をコピーするボタンの作り方

たまに、ウェブ上で調べものをしてるとテキストをコピーするボタンってみかけますよね。

「これをコピペしてください。ボタンを押すとコピー出来ます」的な。

「」こういうアイコンと一緒に表示されてたりもしますね。

通常コピーしたい部分を選択してCtr+Cのショートカットキーでコピーできますが、この動作が面倒だったり、あまり慣れていない方向けにボタンでコピー出来るようにこういった方法がとられてたりすると思います。

実装にはJavaScriptを使うので、JSに慣れない方向けに解説してみたいと思います。

 JavaScriptでコピーボタンを実装してみた

まずは本当にシンプルですが、実装してみたコードをどうぞ。

実装コード例

コピーボタンを押してみてください。どこかに貼り付けようとすると「コピーできます」という文字列がコピーされているはずです。

コード解説

HTMLではテキストエリアに「コピーできます」という文字列、そしてその下にコピーボタンが配置されてるのみです。 

処理としてはテキストエリアの文字列を選択して、Ctr+Cを押すという実際のコピー動作を模しているため、もしテキストエリアっぽくないように見せるならCSS側でborderやoutlineで枠を消してあげるといいかなと思います。

JavaScriptではテキストエリアとボタンの要素をそれぞれ変数に格納しています。

そしてボタンのイベントリスナとしてクリックされた場合に、テキストエリア内の文字を選択する「select()」を使用しています。

そして、選択された文字列を

「document.execCommand("copy");」

でコピーしています。

あとはテキスト選択状態を解除するために「target.blur()」という命令を追加していますが、これは省略可です。

いかがでしょうか。とてもシンプルな処理ですね。

インプットやテキストエリア以外をコピーしたい場合の補足

コピーしたい対象の文字を選択する「select()」がインプットかテキストエリアの要素でないと使えないため、コピーする対象は今回テキストエリアとしています。

それ以外の要素の場合は、一度、対象の要素からインプットかテキストエリアの要素を作成するというような回り道が必要です。

今回はシンプルにテキストエリアでご説明しましたが、それ以外の要素のコピーはまた今度解説したいと思います。

簡単そうに見える処理でもなかなかJavaScriptに慣れていないと難しかったりするので今回まずは一番シンプルな方法をご紹介してみました。

是非ご参考頂ければ幸いです！

最後までお読みいただいてありがとうございました。

リンク

リンク