Javascript 文本框 Copy/Paste 换行符丢失

Question

我有一个 Tampermonkey 脚本，它根据网页上选中的复选框创建值列表。该框精美地显示数据，每个值都在另一个值下方的新行上。但是，当我使用 Microsoft 剪贴板复制和粘贴这些值时，我丢失了换行符。有没有办法调整脚本以允许保留换行符 (\n)？

JavaScript:

var box = document.createElement( 'div' );
box.id = 'myAlertBox';

document.body.appendChild( box );

box.textContent = text + '\n';

var selectedQueries = document.querySelectorAll (query);

selectedQueries.forEach ( (chkBox) => {
    box.textContent += chkBox.title + '\n';
});

CSS:

#myAlertBox {
    font-size: small;
    background: white;
    border: 5px solid green;
    padding: 4px;
    position: absolute;
    top: 280px; right: 80px;
    max-width: 300px;
    white-space:pre-wrap;
}

Answer 1

HTML 将不支持 \n 因为它将被视为白色 space。使用 <br/> 标签作为换行符。

var box = document.createElement( 'div' );
box.id = 'myAlertBox';

document.body.appendChild( box );

box.textContent = text + '<br/>';

var selectedQueries = document.querySelectorAll (query);

selectedQueries.forEach ( (chkBox) => {
    box.textContent += chkBox.title + '<br/>';
});

Answer 2

谢谢大家！我只是将 textContent 更改为 innerHTML 并按照建议使用 <br/> 作为换行符。你们共同为我节省了很多体力劳动。

工作代码：

function ParseCheckBoxes (query, text) {

    if (document.getElementById('myAlertBox') !== null) {
        document.getElementById("myAlertBox").outerHTML='';
    }

    var box = document.createElement( 'div' );
    box.id = 'myAlertBox';

    document.body.appendChild( box );

    box.innerHTML = text + '<br/>';

    var selectedQueries = document.querySelectorAll (query);

    selectedQueries.forEach ( (chkBox) => {
        box.innerHTML += chkBox.title + '<br/>';
    });
}

Javascript 文本框 Copy/Paste 换行符丢失

Javascript Textbox Copy/Paste Loss of Newline

javascript

css

tampermonkey