DOM

【JavaScript】クリップボードへコピーするボタンを動的に追加するコード

更新日：2023/02/13

以前、JavaScriptでテキストをクリップボードにコピーする方法を紹介しました。

■【JavaScript】 クリップボードへテキストをコピーする方法

今回はこの方法の使用例として、動的にクリップボードへコピーするボタンを追加するコードを作成してみます。

 

今回の仕様

次のようなHTMLがあるとします。

<div class="copy">
<p>こんにちは<br>
こんばんは</p>
</div>

この要素のクラス名を受け取って、コピーボタンを設置する関数を作成します。
その際、設置する位置（要素の上下）、ボタンの名前も引数で渡します。

関数名と引数は次のようになります。

関数名と引数

addClipbordCopyButton( className,buttonText="COPY",isTop=true )

className: クラス名
buttonText: ボタンのテキスト
isTop: 要素の上に設置するかどうか。 true:する false:しない（下部に設置）

 

コード

仕様を元に作成したJavaScriptコードです。

window.addClipbordCopyButton = (()=>{

    const clipbordCopy = text =>{
        if( !navigator.clipboard ) {
            alert("クリップボードにコピーできませんでした");return false;
        }
        navigator.clipboard.writeText(text).then(
            ()=>alert("クリップボードにコピーしました"),
            ()=>alert("クリップボードにコピーできませんでした")
        );
        return true;
    };

    const createNode = (tagName,className,text=null)=>{
        const e = document.createElement(tagName);
        e.classList.add(className);
        if( text !== null ) e.innerText = text;
        return e;
    }

    return (className,buttonText="COPY",isTop=true) =>{
        Array.from(document.getElementsByClassName(className))
            .forEach(e=>{
                const p = createNode("p","copy-wrap");
                const button = createNode("button","copy-button",buttonText);
                p.appendChild(button);
                e[isTop ? "before" : "after"]( p );
                button.addEventListener("click",()=>{
                    clipbordCopy(e.innerText);
                });
        });
    }
})();

次のコードで関数を呼び出します。

addClipbordCopyButton("copy");

次のような、ボタンが動的に追加されます。

こんにちは
こんばんは

 

ボタンのスタイルを変更する

標準のボタンだけだと少し味気ないので、スタイルを変更してみます。

.copy-wrap{
    text-align: right;
    padding: 0 1em;
    background: black;
}
.copy-button{
    border-radius: 0;
    background: white;
    font-weight: bold;
    font-size: 0.8em;
}

こんな感じになりました。

こんにちは
こんばんは

更新日：2023/02/13

書いた人（管理人）：けーちゃん

関連記事

スポンサーリンク

記事の内容について

null

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。