ＳＱＬの窓 イラストAC フリー素材
<< DAZStudio : F3 キーで表示されるダイア… | TOP | ざっくりゴシック / ほぼ自由に利用でき… >>

2020年06月07日

clipboard.js で、2種類のクリップボード処理オブジェクトを作成して使い分ける

 
デモページ

1) TABLE データを TAB と 改行で作成して Excel に貼り付けて使用し、

ページ上のデータを加工して最終的にクリップボードにコピーするので、text プロパティにイベントを設定する

2) 入力した内容をそのままクリップボードに転送する

data-clipboard-target で対象の INPUT を設定する( とても簡単 )


<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>

<link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section.css">
<script>
// clipboard.js が読み取る変数
var clipbpardText = "";
$(function(){

	// **********************************************
	// テーブルデータ用クリップボード処理オブジェクト
	// **********************************************
	var clipboard = 
		// クリップボードへの転送のトリガとなるボタンを第一引数に指定
		new ClipboardJS('#action1' , {
			text: function(trigger) {

				// #action1
				console.dir(trigger);

				// clipboard.js に渡す( このデータがクリップポードに転送される )
				return clipbpardText;
			}
		});

	// **********************************************
	// クリップボードへの転送に成功した時に
	// 実行されるイベント( 無くても良い )
	// **********************************************
	clipboard.on('success', function(e) {
		alert("テーブルデータをクリップボードにコピーしました");
	});

	$("#action1").on("click", function(){
		// **********************************************
		// clipbpardText にクリップボードに転送したい文字列をセットする
		// **********************************************
		var work = "";

		$("#tbl tr").each( function( row_cnt ){

			$(this).find("td,th").each(function( col_cnt ){
				if ( col_cnt != 0 ) {
					work += "\t";
				}
				work += $(this).text();
			});
			work += "\r\n";

		});

		clipbpardText = work;
	})

	// **********************************************
	// テキストボックス用クリップボード処理オブジェクト
	// data-clipboard-target 要素で 対象を設定
	// **********************************************
	var clipboard2 = new ClipboardJS('#action2');

	// **********************************************
	// クリップボードへの転送に成功した時に
	// 実行されるイベント( 無くても良い )
	// **********************************************
	clipboard2.on('success', function(e) {
		alert("テキストボックスの内容をクリップボードにコピーしました");
	});

});
</script>
</head>
<body>
	<div id="head">
		<input type="button" id="action1" value="クリップボードへコピー">

		<input type="button" id="action2" value="クリップボードへコピー" data-clipboard-target="#text">

		<input type="text" id="text" value="このテキスト">
	</div>

	<div id="extend">
		<table class="table">
		<tbody id="tbl">
			<tr><th>社員コード</th><th>氏名</th><th>フリガナ</th><th>所属</th><th>性別</th><th>作成日</th><th>更新日</th><th>給与</th><th>手当</th><th>管理者</th><th>生年月日</th></tr>
			
			<tr><td>0001</td><td>山田 太郎</td><td>ウラオカ トモヤ</td><td>0003</td><td>0</td><td>2005-09-12</td><td>2005-11-28</td><td>400000</td><td>9000</td><td>0001</td><td>2012/03/21</td></tr>
			<tr><td>0002</td><td>山村 洋代</td><td>ヤマムラ ヒロヨ</td><td>0003</td><td>1</td><td>2005-06-17</td><td>2005-09-18</td><td>300000</td><td></td><td>0001</td><td>2001/01/02</td></tr>
			<tr><td>0003</td><td>多岡 冬行</td><td>タオカ フユユキ</td><td>0002</td><td>0</td><td>2005-08-14</td><td>2005-11-14</td><td>250000</td><td></td><td>0001</td><td>2001/01/01</td></tr>
			<tr><td>0004</td><td>高田 冬美</td><td>タカタ フユミ</td><td>0003</td><td>1</td><td>2005-06-13</td><td>2005-10-05</td><td>250000</td><td></td><td>0001</td><td>2001/01/01</td></tr>
			<tr><td>0005</td><td>内高 友之</td><td>ウチタカ トモユキ</td><td>0003</td><td>0</td><td>2005-09-12</td><td>2005-11-10</td><td>150000</td><td></td><td></td><td>2001/01/01</td></tr>

		</tbody>
		</table>

	</div>

</body>
</html>
【jQueryの最新記事】
posted by at 2020-06-07 19:59 | jQuery | このブログの読者になる | 更新情報をチェックする


Powered by Seesaa