3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

タグだけでクリップボードへコピー・カットする(JavaScript、clipboard.js)

Posted at

Flashを使わずにクリップボードへのカットやコピーができるJavaScriptのライブラリを利用します。

clipboard.js — Copy to clipboard without Flash
https://clipboardjs.com/

ボタンを押すとコピー(カット)されるシンプルなものです。ボタンごとにJavaScriptのコードを追加するのは大変です。JavaScriptの宣言1つだけで動作するようにしてみます。

clipboard.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Clipboard</title>
</head>
<body>

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

<script>
window.onload = function () {
    new Clipboard('.btn');
};
</script>

<!-- tag -->
<button class="btn" data-clipboard-text="この値がコピーされます">
タグ内の値をクリップボードへコピー
</button>

<!-- input -->
<input id="foo" value="inputの値">
<button class="btn" data-clipboard-target="#foo">
対象:inputのvalue
</button>

<!-- textarea -->
<textarea id="bar">テキストエディタの文字</textarea>
<button class="btn" data-clipboard-target="#bar">
対象:テキストエリアの文字をコピー
</button>
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
対象:テキストエリアの文字をカット
</button>

</body>
</html>

それぞれ中身の解説です。

clipboard.min.js のみで動きます。ファイルはCDNでも提供されています。
https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers

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

Classがbtnであるものに対して動作させます。この宣言だけで、下記3つのサンプルが動作します。ボタンを増やしたとしてもJavaScriptのコードを追加する必要がありません。

clipboard.html
<script>
window.onload = function () {
    new Clipboard('.btn');
};
</script>

サンプル1 値をコピーする

ボタンのclassをbtnとすることで動作させます。
data-clipboard-textで指定された値がコピーされます。

clipboard.html
<!-- tag -->
<button class="btn" data-clipboard-text="この値がコピーされます">
タグ内の値をクリップボードへコピー
</button>

サンプル2 テキスト欄の値をコピーする

ボタンのclassをbtnとすることで動作させます。
data-clipboard-targetで、ボタンをクリックした際にどこの値を利用するか指定します。
ここでは、#fooとしてidがfooであるものをターゲットとしています。

clipboard.html
<!-- input -->
<input id="foo" value="inputの値">
<button class="btn" data-clipboard-target="#foo">
対象:inputのvalue
</button>

サンプル3 テキストエリアの値をコピー・カット

ボタンのclassをbtnとすることで動作させます。
data-clipboard-targetで、ボタンをクリックした際にどこの値を利用するか指定します。
ここでは、#barとしてidがbarであるものをターゲットとしています。

data-clipboard-action="cut"を指定するとカットとなります。

clipboard.html
<!-- textarea -->
<textarea id="bar">テキストエディタの文字</textarea>
<button class="btn" data-clipboard-target="#bar">
対象:テキストエリアの文字をコピー
</button>
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
対象:テキストエリアの文字をカット
</button>
3
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?