WordPress

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

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

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

WordPress で記事を書いていて、特定の文章をボタン一つでクリップボードにコピーする機能を付けたいときがあります。

(歌の歌詞や、サンプルコード、広告のスクリプトなどをボタンクリックでコピーできるようにする)

ポイント

本記事では、

特定の文章をボタン一つでクリップボードにコピーする機能を、

簡単な JavaScript で実装する方法を解説します。

おすすめ副業

\ブログ副業を詳しく見たい方は こちら をクリックしてください/

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 のお役立ちテクニックはこちら

まとめ

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

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

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

40代・50代「会社員におすすめ」の在宅でできる副業5選

40代・50代「会社員におすすめ」の在宅でできる副業5選(初心者でもできる)

40代、50代だからこそ気が付く、不安に思う将来設計、しかし今から大きなチャレンジは難しい。投資もリスクが多い。いまこそやってみたいのが「副業」です。本記事では40代、50代におすすめの副業5選を紹介します。

続きを見る

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業3選

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業3選(初心者でもできる)

20代、30代の主婦にとって、これからの人生設計、お金の心配は少なからずありますね。20代、30代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い(または少ない)主婦におすすめの副業ができれば安心ですね。記事では、20代、30代専業主婦におすすめの副業3選を紹介します。

続きを見る

地方がチャンスのおすすめ副業を紹介!

【2024年チャンス】地方でノマドで働ける。おすすめ在宅副業を紹介!快適な移住先も紹介します

都会は住みにくい!地方の方が自然もあり、ちょうど規模の街で素敵に暮らすのは人生設計として最高ですね。しかし地方は本業の給料が低いのがネック、そこで是非お勧めしたいのがインターネットでできる副業です。本記事では、地方で快適に暮らす!おすすめ副業を紹介します。ゆるーくまったり人生過ごしたいですね。

続きを見る

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

WordPress の情報、テクニック一覧はこちらをクリック!

クリックアイコン

WordPress のおすすめテーマ

あなたのブログを強力にアピールし、読者を惹きつける、

魅力的なウェブサイトを手軽に作りたいですか?

そんな方に オススメのテーマが「AFFINGER」 です。

「AFFINGER」テーマを使えば、SEOに強く、集客力がアップし、

上級者でも満足できる、魅力的なウェブサイトが作れます。

ブログアフィリエイトを本気で戦うなら、「AFFINGER」の威力を体感してください。

\ WordPress のおすすめテーマ「アフィンガー」を詳しく見る /

AFFINGER の紹介(メリット・デメリットを紹介)

PR
―― 今日のおみくじ ――

第 33 番

吉


今日のメッセージ

燦燦と輝いて、これから飛躍していこう!
ブログの始め方
レンタルサーバー
WordPress
AFFINGER

ブログランキング・にほんブログ村へ  

Presented By Boon Boon Blog .Com

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

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

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

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

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