Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

[JavaScript] ”クリップボードにコピー” ボタンを実装する(clipboard.jsの使い方)

More than 3 years have passed since last update.

clipboard.js の使い方メモ。すごく簡単に クリップボードにコピー ボタンを追加できます。

clipboard.js — Copy to clipboard without Flash

ライセンスは MIT license です。

インストール

cdn

CDN Providers · zenorocha/clipboard.js Wiki

npm

npm
$ npm install clipboard --save

使用例

基本的に data-clipboard-target="#idname" で任意のidを指定するだけで良いです。

index.html
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.6.0/clipboard.min.js"></script>

<input type="text" value="クリップボードコピーテスト(input)" id="input_test">
<button class="btn" type="button" data-clipboard-target="#input_test">Copy</button>

<textarea id="textarea_test">
クリップボードコピーテスト(textarea)
</textarea>
<button class="btn" type="button" data-clipboard-target="#textarea_test">Copy</button>

<script>
(function() {
'use strict';

var clipboard = new Clipboard('.btn');

clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);

    e.clearSelection();
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

})();
</script>

オプションとして data-clipboard-action="cut" の指定で切り取りに変更もできます。

Vue.jsと組み合わせて使用する場合

※Vue.jsと組み合わせて使用する場合はやり方が若干異なります。以下の記事を参照してください。

[Vue.js][clipboard.js] Vue.jsとclipboard.jsを組み合わせて使用する - Qiita

参考

clipboard.js — Copy to clipboard without Flash

koara-local
言語は最近は C#, Javaあたりがメイン。端末VimからIDEに移行。IntelliJすごい。Qiitaでの記事やその中の主張は、所属している企業/団体の意見を代表するものではありません。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away