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

谢谢大家！我只是将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/>';
    });
}

Answer 2

HTML不支持\n，因为它会被视为空格。使用<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/>';
});

Javascript文本框复制/粘贴丢失的换行符

2 个答案: