【WordPress】JavaScript でクリップボードへのコピーを実現( navigator.clipboard を使う )

広告:ページ内にてアフィリエイト広告を利用しています。

JavaScript でクリップボードへのコピー

WordPress で記事を書いていて、特定の文章をボタン一つでクリップボードにコピーする機能を付けたいときがあります。(歌の歌詞や、サンプルコード、広告のスクリプトなどをボタンクリックでコピーできるようにする)

本記事では、特定の文章をボタン一つでクリップボードにコピーする機能を、簡単な JavaScript で実装する方法を解説します。

\自宅でする副業で月に〇万円の収入増があると嬉しすぎる!/

ココナラ副業を始めよう

実際に4か月でプラチナランク(売り上げ10万円以上)を達成した筆者が、ココナラで成功する方法を詳しく解説します。こちら をクリックしてください

目次
PR

JavaScropt でコピーするサンプル

JavaScript で文字列をクリップボードにコピーするサンプルです。



ボタンを押すと、ボックスの中の文字列をクリップボードへコピーします。

※ Internet Explore では動作しません(Edge は動きます)

JavaScript で実装する方法( navigator.clipboard を使う )

クリップボードにコピーする JavaScript は “navigator.clipboard” を使います。

(※ “navigator.clipboard” は InternetExplore 未対応です)

■ サンプルコード

WordPress の 記事エディタの「カスタムHTMLブロック」で次のサンプルコードを入力してください。

<textarea id="myIdTextCopyString" rows="3" cols="30">
ここに、クリップボードにコピーしたい文字列を書きます。
なにがでるかな?なにがでるかな?ふっふー♪</textarea>
<br>
<br>
<button onclick="myCopyClipboard()">クリップボードにコピーします</button>

<br>

<script>
    function myCopyClipboard() {
        var varText = document.getElementById("myIdTextCopyString");
        try {
            navigator.clipboard.writeText(varText.value);
            alert("コピーしました");
        } catch (error) {
            // 失敗した場合はこちら
            alert("コピーできませんでした");
        }
    }
</script>

テキストエリアの文字を読み取って、クリップボードにコピーしています。

document.execCommand は使わない

“document.execCommand” でもクリップボードへのコピーをすることはできますが、execCommand は廃止されるメソッド(命令)のため、いずれ多くのブラウザでサポート対象外となります。

execCommand を使う場合は以下のような記述になります。

<textarea id="myTextCopyStringOld" name="textarea1" rows="3" cols="30">
ここに、クリップボードにコピーしたい文字列を書きます。
なにがでるかな?なにがでるかな?ふっふー♪</textarea>
<br />
<button onclick="myCopyClipboardOld()">クリップボードにコピーします</button>
</form>

<script>
function myCopyClipboardOld() {
    var varText = document.getElementById("myTextCopyStringOld");
    varText.select();
    document.execCommand("Copy");
    alert("コピーしました");
}
</script>

select() で選択し、execCommand(“Copy”) でコピーしています。

いまも多くのページで execCommand を用いているのを見かけますが、いずれ廃止され使えなくなる可能性の高い記述のため、早めに、”navigator.clipboard” に差し替えることをおすすめ します。

WordPress もっと!お役立ちテクニック

WordPress のお役立ちテクニックはこちら

PR

【自宅で出来る・一人で出来る】ブログ・アフィリエイトで始める副業

ブログ

比較的安定した収入がある会社員が、月々プラスアルファの収入を得たいと思った時に最もおすすめしたい副業は「ブログ・アフィリエイト」です。

「ブログ・アフィリエイト」とは、自分のブログを開設し企業の広告を貼ることで、読者が広告をクリックして商品を購入した場合に紹介報酬が手に入る副業です。

アフィリエイトの仕組み

人気の出るサイトであれば、大きな収益が期待できることも。ストック型の収益モデルのため、作業時間以上に収益をあげられる可能性がある副業です。定年して会社を退職した後も、収入を確保し続けることができます。

ブログ・アフィリエイトの始め方がわからない場合でも手順通りやれば大丈夫、具体的な手順は こちらを参照 してください。

\1日早く始めれば、1日早く収入が増える/

プラスアルファの人生は、始めなければ始まらない

まとめ:JavaScript でクリップボードへのコピーを実現

JavaScript を用いて、特定の文字列をクリップボードにコピーする場合は、”navigator.clipboard” を利用します。

※ “document.execCommand” は、廃止される予定のため、利用しません。

楽しいページ(記事)を作ってくださいね。

この副業
アフィリエイトスクール
ノートパソコン
もっと WordPress のノウハウを知りたいときは
クリックアイコン

アフィリエイトスクールのすすめ

アフィリエイト初心者や経験者にとって、正しいスキルを学ぶことは成功につながる重要な要素です。間違った手順でブログ運営をしていたらいつまでたっても成功しません。正しい知識はスクールで身に着けるのが一番です。

\説明会参加無料

おすすめアフィリエイトスクールはこちら

1日早く始めれば、1日早く収益化できる。

どんどん情報局

本サイトは「どんどん情報局」が運営しています。

著作者:Boon ☆

どんどん情報局はメディア記事の執筆を通して世の中に有益な情報を発信することを心がけています。

「どんどん情報局」の紹介はこちら

PR

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記

目次