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

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

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

完成形はこちら。

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

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

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

HTML

<input id="copyText" type="text">
<button onclick="copy()">コピーする</button>

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

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

JavaScript

function copy() {
    // コピー対象をJavaScript上で変数として定義する
    var copyText = document.getElementById("copyText");

    // コピー対象のテキストを選択する
    copyText.select();

    // 選択しているテキストをクリップボードにコピーする
    document.execCommand("Copy");

}

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

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

まとめ

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