クリックコピーしたテキストが改行されない。

Question

<input id="copyTarget" class="input_copy-btn" type="text" value="改行したいテキスト<br>改行したいテキスト<br>改行したいテキスト">

<button class="btn_copy-message" onclick="copyToClipboard()">テキストをコピー</button>

<script>
    //テキストコピーボタン
        function copyToClipboard() {
            var copyTarget = document.getElementById("copyTarget");

            // コピー対象のテキストを選択する
            copyTarget.select();

            // 選択しているテキストをクリップボードにコピーする
            document.execCommand("Copy");

            // コピー確認テスト用
            alert("コピーが完了しました！");
        }
</script>

クリックコピーしたテキストが改行されない。
下記、試したもの

・<br>
・\n
・

・

Comments

[m.ts10806]

コピーした後、どのようにクリップボードの中身を確認して「改行されない」ことを確認されたのでしょうか。

[ozboze]

ご質問ありがとうございます！
コピーした後、任意のテキストフィールドにペーストして確認しました。

e.g.
slack、LINEのチャット、gmailの下書き等。

[m.ts10806]

そりゃまぁ、
BRはHTMLタグであって改行ではないですから。

[ozboze]

改行コード等も試したのですが、
どうすれば実現しますかね？

[ozboze]

一応、"試したもの"として、改行コードも挙げてはいるのですが、分かりづらかったようですね。

[m.ts10806]

inputのvalueをかえたのかどうかは分かりませんでした。

Answer 1

本質的な話をするとvalue属性の属性値に入れてしまった時点で「そういう文字列」になります。
コピーできるのも画面に表示されている内容そのものです。
textareaなら下記のようにすればできますが、

<textarea>
改行したいテキスト
改行したいテキスト
改行したいテキスト
</textarea>

inputタグでは同じようにしても有効にならず

<input id="copyTarget" class="input_copy-btn" type="text" value="改行したいテキスト
改行したいテキスト
改行したいテキスト">

なのでやるとしたらJavaScriptで受け取ったテキストを<br>→改行コードに置換したうえで、そのテキストをコピー対象とすることですね。
たぶん一時的に<textarea>を作るとかする必要がありそうです