どうも7noteです。クリップボードにテキストをコピーさせる方法。
ユーザーがわざわざドラッグしてコピーしなくても、任意のテキストをクリップボードにコピーさせることができます。input
やtextarea
などの要素のテキストをコピーさせることができます。
サンプル
![sample.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2F8cdcb2d6-75e6-7410-eab9-174123bc18ac.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=23a22cefbb2b74d8d6f6a23d53da2efb)
ソース
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
などのユーザーが選択したり入力したりする要素にしか効かないので注意!
アラートは出す必要はないですが、あったほうがちゃんとコピーできてるというのがわかって使いやすいと思います。
もっと突き詰めるなら、バルーンなどが一瞬表示されてフェードアウトしていくような処理を入れたらもっと今っぽい感じになると思います。