エンジニアの将来って?

現在7年目のCOBOL→Java→C#エンジニアが、将来への考えや勉強のアウトプット、たまに腎臓について書くブログです

【jQuery】プラグイン[clipboard.js]を使って、テキストボックスの値をクリップボードにコピーする

こんにちは。たいら(@tairaengineer2)です。

この記事ではJavaScriptのフレームワークjQueryのプラグインclipboard.jsを使って、テキストボックスの値をクリップボードにコピーするやり方の解説記事です。

[clipboard.js]をダウンロードする

プラグイン[clipboard.js]のダウンロードするやり方は下記をご参照ください。

www.tairax.com

作ったプログラムの概要

作ったのは、HTML,jQueryを1つずつです。
HTMLはテキストボックスとボタンを作ります。
jQueryでボタンを押されたとき、テキストボックスの中身をクリップボードにコピーするプログラムです。

フォルダ構成

フォルダ構成は、↓の画面のようになっています。

f:id:Tairax:20181202193657p:plain

プログラムの中身を

  1. HTML
  2. JavaScript

の順で書いていきます。

HTML

<!DOCTYPE html>
<html>
	<head>
		<title>クリップボードにコピー</title>
		<meta content="charset=UTF-8">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script src="../js/clipboard.min.js"></script>
		<script src="../js/ClipBoardSample.js"></script>
	</head>
	<body>
		<input id="textBox" type="text">
		<button class="btnClipboard" data-clipboard-target="#textBox">クリップボードにコピー</button>
	</body>
</html>

jQuery

$(function() {
	var clipboard = new ClipboardJS('.btnClipboard');
	clipboard.on('success', function(e) {
		alert("コピーに成功しました。");
	});
	clipboard.on('error', function(e) {
		alert("コピーに失敗しました。");
	});
});

実行結果

では実行してみます。

f:id:Tairax:20181201103718p:plain

テキストボックスに「あいうえお」を入力してみます。

f:id:Tairax:20181201104948p:plain

[クリップボードにコピー]ボタンを押します。

f:id:Tairax:20181201105222p:plain

[コピーに成功しました。]というアラートがでました!
本当にクリップボードにコピーできているか確認します。

f:id:Tairax:20181201105541p:plain

クリップボードにコピーできていました!
では、解説します。

解説

  • スクリプトを読み込む順番
  • HTMLのinputとbutton
  • クリップボードにコピーしているところ

の順で解説します。

スクリプトを読み込む順番

スクリプトを読み込んでいる箇所はここです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="../js/clipboard.min.js"></script>
<script src="../js/ClipBoardSample.js"></script>

読み込む順番は必ず

  1. jquery.min.js
  2. clipboard.min.js
  3. 自分が作ったJavaScript(今回はClipBoardSample.js)

にしてください。
理由は [clipboard.min.js]は、jQueryのプラグインです。
だから最初にjQueryを読み込む必要があります。

今回jQueryはGoogle Developersから読んでいます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Google Developersの最新バージョンは↓から確認できます。

developers.google.com

HTMLのinputとbutton

テキストボックスに、クリップボードにコピーできるようにしている箇所はここです。

<input id="textBox" type="text">
<button class="btnClipboard" data-clipboard-target="#textBox">クリップボードにコピー</button>

[data-clipboard-target]は、設定されたidやclassの要素の内容をコピーできます。
今回では、idがtextBoxであるテキストボックスの内容をコピーします。

クリップボードにコピーしているところ

クリップボードにコピーしているところはここです。

var clipboard = new ClipboardJS('.btnClipboard');

これだけで、classがbtnClipboardで取得したものをコピーできます。
コピーしただけでは、本当にコピーできたか分かりません。
だから

clipboard.on('success', function(e) {
	alert("コピーに成功しました。");
});
clipboard.on('error', function(e) {
	alert("コピーに失敗しました。");
});

結果をここでアラートで表示しています。

まとめ:clipboard.jsを使ってみよう!

以上が、clipboard.jsを使ってテキストボックスの中身をクリップボードにコピーするやり方です。
あなたのご参考になれば幸いです。

 

他にもjQueryについて書いています。
こちらもご参考ください。

【jQuery UI】カレンダーアイコンからカレンダーを表示させる【Datepicker】

【jQuery】hoverを使って、背景色を変えたり、アラートを出す