ＳＱＬの窓
<< GAS : Google スプ… | TOP | Java11 + Visual St… >>

2020年10月13日


clipboard.js を使用してテキストをコピーする際に clipboard.js が必要とするパーツと意味

 
配布ページの説明では、『トリガー要素にdata-clipboard-target属性を追加します。』とありますが、ここではトリガー要素であるボタンのコンテナである div 要素に設定しています。

Advanced Usage では、トリガー要素を直接指定してトリガーの処理の後に、new ClipboardJS であらかじめ作成されたイベントより return される文字列をクリップボードに送る事ができます。

<script>
var clipbpardText = "";

$(function(){
	var clipboard = new ClipboardJS('#button1' , {
		text: function(trigger) {
			return clipbpardText;
		}
	});

	clipboard.on('success', function(e) {
		alert("クリップボードにコピーしました");
	});

	$("#button1").on("click", function(){
		clipbpardText = $("#text").val();
	})
});
</script>
<textarea id="text"></textarea>
<button type="button" id="button1">実行</button>

以下では、new ClipboardJS('.clipboard'); で作成されたオブジェクトは、処理が成功した時のイベントの使用方法として実装していますが、作業の妨げになるのであれば削除したほうがいいでしょう。

#src_clipboard の div は、画面外に作成したテキストの一時置き場です。clipboard.js は常にここからテキストを取得してクリップボードに渡します。この手法は、clipboard.js が内部でも使っている手法です。

<!DOCTYPE html>
<html>
<head>
<title>clipboard.js</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js" integrity="sha512-hDWGyh+Iy4Mr9AHOzUP2+Y0iVPn/BwxxaoSleEjH/i1o4EVTF/sh0/A1Syii8PWOae+uPr+T/KHwynoebSuAhw==" crossorigin="anonymous"></script>
<script>
$(function () {

	// **********************************************************************
	// オブジェクトや内部イベントの構築
	// ▼ 内部イベントのパーツ
	// class に clipboard を持つコンテナ内でイベントが起きた時
	// data-clipboard-target の内容の中にあるテキストを取り出してコピーする
	// コンテナ内のイベントが終わってから処理されるので、
	// イベント内で data-clipboard-target の中に必要なテキストをセットする
	// **********************************************************************
	var clipboard = new ClipboardJS('.clipboard');

	// コピー完了後の処理( 無くてもよい )
	clipboard.on('success', function(e) {
		alert("クリップボードにコピーしました");
	});

	// クリップボードにコピーを実行する
	$("#btn").on("click", function(){
		$("#src_clipboard").text( $("textarea").val() );
	});

});
</script>

<style>
html, body {
	height:100%;
}
textarea {
	width: 800px;
	height: calc(100% - 100px);
	font-size: 18px;
	font-weight: 600;
}
#src_clipboard {
	position:absolute;
	left:-1000px;
	width:900px;
	white-space:pre-wrap;
	word-wrap:break-word;
}
</style>
</head>
<body>
<div id="src_clipboard"></div>
<div class="clipboard" data-clipboard-target="#src_clipboard">
	<input type="button" value="コピー" id="btn">
</div>
<textarea></textarea>
</body>
</html>
【JavaScript ライブラリの最新記事】
posted by lightbox at 2020-10-13 19:20 | JavaScript ライブラリ | このブログの読者になる | 更新情報をチェックする



Powered by Seesaa
container 終わり



✅ フリーフォントで簡単ロゴ作成
✅ フリーフォントでボタン素材作成
✅ フリーフォントで吹き出し画像作成
✅ フリーフォントではんこ画像作成
✅ ほぼ自由に利用できるフリーフォント
✅ フリーフォントの書体見本とサンプル
✅ 画像を大きく見る為のウインドウを開くボタンの作成
✅ CSS ドロップシャドウの参考デモ
✅ イラストAC
✅ ぱくたそ
✅ 写真素材 足成
✅ フリーフォント一覧
✅ utf8 文字ツール
右サイド 終わり
base 終わり