<JavaScript>クリップボードにコピーするボタン作ってみた

クリップボードにコピーできるものを作ってみた

今回はテキストをクリップボードに書き込むやつを作ってみました。
なんでかって言うと特に深い理由はありません。
やってみたかっただけです。

目次

  1. 使うフレームワーク
  2. 実際に作ってみたコード
  3. 参考資料

1.使うフレームワーク

今回使うフレームワークはこんなものです。
clipboardjs
これを使うことで簡単にクリップボードにコピーするのを容易にする事ができるって感じです。

2.実際に作ってみたコード

2.1 必ずやること

  • scriptの呼び出し

以下のコードを使って呼び出します。

<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script>

これに関しては定型文だと思って使えばいいかなって感じです。

2.2 実験用に作成したhtmlの概要

  • 入力するフォームを作る

今回はサンプルとして、入力フォームに入っている文字列をコピーする機能を実装してみます。
ということでまずはフォームを作ります。
コピーするところを1つに指定できないといけないので対象のタグにはid属性を付けます。

<input id="text" type="text">

うーん、そのまんまって感じ。
ひねりもクソもないですね。

  • コピーするためのボタンを作る 実際にコピーするためのボタンを作ります。
    まずはコードから
<button id="cp" data-clipboard-target="#text">copy</button>

とりあえず1つに定まっててほしいのでidをつけます。
また、clipboardにわたすところのidを属性に記述する必要があるので"data-clipboard-target"にそのidを記述します。(今回だと#text)

2.3 実験用に作成したJSの概要

2.3.1 単純にクリップボードにコピー

まずはコピーしてみます。
単純にコピーするためのコードは下のようになります。

<script type="application/javascript">
  var clipboard = new Clipboard('#cp');
  clipboard.on('success', function(e) {
     e.clearSelection();
  });
</script>

このコードでは#cpをクリックするとクリップボードにコピーするオブジェクトを作成して、コピーを行います。
実際にコピーが成功すると選択を解除することのできるようにしてあります。
また、実行結果のステータスメッセージが成功のときは選択を解除するようにしておくといいみたいです。

2.3.2 コピーしてフォームを空にする(cutする)

inputタグと、textareaタグについてはフォームの中身を切り取りすることも可能です。
切り取りをするときには以下のようにボタンのコードを修正することで可能になります。

<button id="ct" data-clipboard-action="cut" data-clipboard-target="#text">cut</button>

data-clipboard-action属性にcutを指定することで、切り取りをすることが可能になります。

3.参考資料