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

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

今回はサンプルとして、入力フォームに入っている文字列をコピーする機能を実装してみます。
ということでまずはフォームを作ります。
コピーするところを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を指定することで、切り取りをすることが可能になります。

にーやまの活動記録

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

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

目次

1.使うフレームワーク

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

2.1 必ずやること

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

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

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

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

3.参考資料