clipboard.js CDNJS デモページページ下部は、div に contenteditable="true" を設定しているので直接編集できるエリアになっています。なので、クリップボードにコピーした後は普通に貼り付けて確認できます。 実装内容 1) ページにひとつだけ、クリップボード転送用の要素を DIV で作成します(ここでは id="clipboard") (body 要素直下でいいと思います) 2) DIV 内に改行やスペースを反映させる為に white-space:pre-wrap を設定する ( 3) で幅を指定してそこで改行させる為の -wrap を使用します ) 3) ページ上から隠す為に、position:absolute;left:-1000px を設定する (クリップボートへコピーする為に選択する必要があるので、非表示では動作しません) 転送したテキストがこちら側へ表示しないように width:900px と word-wrap:break-word を指定する 4) クリックイベントは、ボタンである必要は無く、どのような要素でも良い 5) ここでは、クリップボードへコピーが終了した後、alert でメッセージを表示しています ( 必要な場合にこのようにイベントを使用します ) 注意事項 ここでは、WEB ページ内に無い文字列を加工等してクリップボードに転送する事を想定しているので、転送用の隠し DIV を用意していますが、WEB ページ上に既にあるテキストならば、その要素に対して直接 data-clipboard-target 属性をトリガー要素に設定します
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<title>クリップボードへコピー</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.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.4/clipboard.min.js"></script>
<script>
$(function(){
// ***************************
// クリップボード
// ***************************
// コピーする時のトリガーとなる要素に設定されるクラスを決定
var clipboard = new ClipboardJS('.clip_trigger');
// ***************************
// コピー成功後のイベント
// ***************************
clipboard.on('success', function(e) {
alert("クリップボードにコピーしました");
});
// ***************************
// クリップボード用データ転送
// ***************************
$("#act_copy").on("click", function(){
$("#clipboard").text( $("#text_data").val() );
});
});
</script>
<style>
html,body {
height: 100%;
}
body {
margin: 0;
}
#text_data {
width:300px;
}
/* 上下エリア フィットコントロール用 */
#head {
padding: 16px;
width: 100%;
height: 230px;
}
#extend {
padding: 4px 16px;
border: solid 2px #c0c0c0;
overflow: scroll;
margin-left: auto;
margin-right: auto;
width: calc( 100% - 3px );
height: calc( 100% - 230px - 2px );
}
</style>
</head>
<body>
<!-- クリップボード用隠しエリア -->
<div id="clipboard" style='position:absolute;left:-1000px;width:900px;white-space:pre-wrap;word-wrap:break-word;'></div>
<div id="head">
<div class="alert alert-primary">クリップボード処理
<a class="btn btn-secondary btn-sm float-right align-top" href=".">フォルダ</a>
</div>
<span class="align-top mr-4">クリップボードへコピー</span>
<textarea class="align-top mr-4" id="text_data"></textarea>
<input
id="act_copy"
data-clipboard-target="#clipboard"
class="clip_trigger btn btn-primary align-top mr-4"
type="button"
value="実行">
<input
onclick="location.reload(true)"
class="btn btn-info btn-sm align-top mr-4"
type="button"
value="再表示">
</div>
<!-- 編集可能なエリア : ここにクリップボードの内容を貼り付けて確認する -->
<div id="extend" contenteditable="true"></div>
</body>
</html>