コピペで使える!JavaScriptでコピーボタンを作成する方法

5-Nov-09-2023-06-19-50-3783-AM

🎬初めに

お久しぶりです!!フューチャースピリッツ、エンジニアブログの中の人、「通行人 R」でございます。

「JavaScript」でコピーボタンを作成したいと思ったことはございませんか？

コピーボタンを実装する事でユーザーエクスペリエンスの質を向上させる事ができます!

シリーズ第三回目は「JavaScriptでコピーボタンを作成する方法」について皆様にお届け致します!!

📘コピーボタンとは？

6-4

初めにコピーボタンとは？について簡単に説明させていただきます!!

コピーボタンとはWebページ上のテキストやコード等をクライアント環境のクリップボードにコピーするための機能となります。

主にURLテキストのコピーやプログラムコードのコピー等の利用者の作業を楽にする為に実装されます。

またコピー機能はボタン以外にも様々なトリガーを設定する事が出来ます。

📘コピーボタンの実装方法

7-2

ここまでお付き合い頂きありがとうございます!!

それでは、コピーボタン実装方法について解説させていただきます!

ベースの要素を作成する

初めにベースのHTML要素を作成します。

今回はコピー対象の要素を<p>タグとして作成致します。

またコピー実行のトリガーを<button>タグを作成します。

#HTML

<p>コピー内容</p>
<button>コピー実行</button>

IDとイベントハンドラの設定

次に<p>要素にIDを割り振ります。

IDは任意の名前を設定可能です。今回は「copytxt」という名前でIDを追加します。

ボタン要素にはイベントハンドラの設定を行います。

今回は「copyButton」という関数と上記で作成したIDを引数「copytxt」として指定します。

#HTML

<p id="copy">コピー内容</p>
<button onclick="copyButton ('copytxt')">コピー実行</button>

JavaScriptでコピー関数を作成する

次にJavaScriptにてコピー関数を作成します。

コピーには「Clipboard: writeText()」を使用します。

詳細はmozilla公式サイトをご確認ください。

writeText詳細

また、他要素でも使用できるように要素指定は直接行わず引数として利用するようにします。

#JavaScript

function copyButton(elementId) {

            // 引数で得たIDの要素のテキストを取得
            var element = document.getElementById(elementId);

            // 上記要素をクリップボードにコピーする
            navigator.clipboard.writeText(element.textContent)
}

完成コード

下記が完全版コードとなります!

今回はボタン要素とトリガー設定致しました。

その他にも様々なトリガーを設定可能となっております。

<!DOCTYPE html>

<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptでコピーボタンを作成する</title>
</head>

<body>

    <p id="copytxt">コピー内容</p>
    <button onclick="copyButton('copytxt')">コピー実行</button>

    <script>
        function copyButton(elementId) {
            // 指定したIDの要素のテキストを取得
            var element = document.getElementById(elementId);

            // テキストをクリップボードにコピー
            navigator.clipboard.writeText(element.textContent);
        }
    </script>

</body>
</html>