WordPress

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



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

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

簡単な JavaScript で実装できるのでご紹介します。

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>
</form>

<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" に差し替えることをおすすめします。

まとめ

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

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

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

WordPress のおすすめテーマ



  • SEO に強く【集客力強化】が望める
  • かっこいい(かわいい)ホームページを作りやすい
  • 初心者でも使えて、上級者になっても満足できる


本気でブログアフィリエイトを戦うなら、使うテーマは「AFFINGER」!

WordPress ブログの最上級おすすめテーマ「AFFINGER」をお試しください。



AFFINGER の紹介はこちら




AFFINGER(アフィンガー)テーマは「ここ」がすごい!【WordPress 初心者必見!】

AFFINGER テーマを使うと「オシャレなサイト」を作りやすくなります。オシャレなサイトは、ユーザーの滞在時間が増え、サイト評価があがり、サイトの露出が増えて、さらにユーザ(読者)を呼び込む好循環を実現します。WordPressのテーマ「AFFINGER」を徹底紹介します。

続きを見る


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










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




Presented By Irojiro Haraguro .Com