001.<!DOCTYPE html>
002.<html>
003.<head>
004.<meta charset="utf-8">
005.<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
006.<title>クリップボードへコピー</title>
007.
008.<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
009.<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" />
010.
011.<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
012.
013.<script>
014.$(function(){
015.
016. // ***************************
017. // クリップボード
018. // ***************************
019. // コピーする時のトリガーとなる要素に設定されるクラスを決定
020. var clipboard = new ClipboardJS('.clip_trigger');
021.
022. // ***************************
023. // コピー成功後のイベント
024. // ***************************
025. clipboard.on('success', function(e) {
026. alert("クリップボードにコピーしました");
027. });
028.
029. // ***************************
030. // クリップボード用データ転送
031. // ***************************
032. $("#act_copy").on("click", function(){
033.
034. $("#clipboard").text( $("#text_data").val() );
035.
036. });
037.
038.});
039.
040.</script>
041.
042.<style>
043.html,body {
044. height: 100%;
045.}
046.
047.body {
048. margin: 0;
049.}
050.
051.#text_data {
052. width:300px;
053.}
054.
055./* 上下エリア フィットコントロール用 */
056.#head {
057. padding: 16px;
058. width: 100%;
059. height: 230px;
060.}
061.#extend {
062. padding: 4px 16px;
063. border: solid 2px #c0c0c0;
064. overflow: scroll;
065.
066. margin-left: auto;
067. margin-right: auto;
068. width: calc( 100% - 3px );
069.
070. height: calc( 100% - 230px - 2px );
071.}
072.
073.</style>
074.
075.</head>
076.<body>
077.
078.<div id="clipboard" style='position:absolute;left:-1000px;width:900px;white-space:pre-wrap;word-wrap:break-word;'></div>
079.<div id="head">
080. <div class="alert alert-primary">クリップボード処理
081. <a class="btn btn-secondary btn-sm float-right align-top" href=".">フォルダ</a>
082.</div>
083.
084. <span class="align-top mr-4">クリップボードへコピー</span>
085.
086. <textarea class="align-top mr-4" id="text_data"></textarea>
087.
088. <input
089. id="act_copy"
090. data-clipboard-target="#clipboard"
091. class="clip_trigger btn btn-primary align-top mr-4"
092. type="button"
093. value="実行">
094.
095. <input
096. onclick="location.reload(true)"
097. class="btn btn-info btn-sm align-top mr-4"
098. type="button"
099. value="再表示">
100.
101.
102.</div>
103.
104.
105.<div id="extend" contenteditable="true"></div>
106.
107.
108.
109.</body>
110.</html>
ページ下部は、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 属性をトリガー要素に設定します