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

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

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

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

サンプル

sample.png

ソース

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

おそまつ!