【JavaScript】ボタンをクリックしたらテキストをコピーする実装方法

今回は、JavaScriptを使って「ボタンをクリックしたらテキストをコピーする実装方法」について紹介します。

PCではコピーするためのショートカットキーも用意されていますが、ボタンを押して簡単にコピーできるようにしておくと、ユーザーのためになりますよ!

【JavaScript】ボタンをクリックしたらテキストをコピーする実装方法

完成形はこちら。

See the Pen
Untitled
by webis (@webis-co)
on CodePen.

試しにテキストを入れ、ボタンをクリックしてみてください。

フォームに打ち込んだテキストがコピー出来ることが分かるでしょう。

HTML

テキストを入れるためのinputタグと、テキストをコピーするためのbuttonタグを用意します。

そして、buttonタグにはクリックした時にcopy()関数を記述し、後でJavaScriptでbuttonタグをクリックした時にcopy()関数が実行されるようにします。

JavaScript

先ほどbuttonタグに記述したcopy()関数に関するコードです。

buttonタグをクリックしたら、inputタグの中にあるテキストをコピーする関数が実行される仕組みになっています。

まとめ

以上が、「ボタンをクリックしたらテキストをコピーする実装方法」でした。

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事