10秒でわかるクリップボードにコピーするclipboard.jsの使い方

clipboard.jsとは

ボタンでテキストをクリップボードにコピーするJavaScriptファイル。

まず以下のコードのようにclipboard.jsを読み込む。

そしてnew ClipboardJS()でコピーするボタンの要素を指定して、data-clipboard-target="#foo"でコピーするinputタグのidを指定する。

<input type="text" value="sample" id="foo">
<button class="btn" data-clipboard-target="#foo">copy</button>
<script src="https://unpkg.com/clipboard@2/dist/clipboard.min.js"></script>
<script>
new ClipboardJS('.btn')
</script>

clipboard.jsのサンプル