【初心者でもわかる】ワンクリックでテキストをコピーできるボタンの作り方

どうも7noteです。クリップボードにテキストをコピーさせる方法。

ユーザーがわざわざドラッグしてコピーしなくても、任意のテキストをクリップボードにコピーさせることができます。
inputやtextareaなどの要素のテキストをコピーさせることができます。

サンプル

ソース

index.html

<p>確認コード：<input type="text" id="code" value="1234"></p>
<button onclick="copy();">コピーする</button>

script.js

function copy() {
    var targetCode = document.getElementById("code"); // コピー対象のテキストを選択する
    targetCode.select();                              // コピーしたい要素を選択状態にする
    document.execCommand("Copy");                     // 選択しているテキストをクリップボードにコピーする
    alert("コピーしました！");                            // 任意でアラートを出す
}

解説

.select()はinputなどのユーザーが選択したり入力したりする要素にしか効かないので注意!
アラートは出す必要はないですが、あったほうがちゃんとコピーできてるというのがわかって使いやすいと思います。
もっと突き詰めるなら、バルーンなどが一瞬表示されてフェードアウトしていくような処理を入れたらもっと今っぽい感じになると思います。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ