为什么我的脚本不使用 keyup 换行？

Question

我正在为我的论坛编写脚本，生成给定字符串的预览。

这是我的js代码

function MakePreview() {
var getText = document.getElementById('inputText').value;
document.getElementById('outputText').innerHTML = getText;}

这是我的 HTML 代码

<article>
    <h2>What are you doing?</h2>
    <textarea id="inputText" onkeyup="MakePreview()"></textarea>
    <br/>
    <input type="submit" class="button" value="Hello"/>
</article>
<article>
    <p id="outputText"></p>
</article>

此外，我有一个用于输入的文本区域和一个用于输出的段落。但是输出不会像 textareas 那样换行。

通常，当字符串长于给定内容的宽度时，段落会自动换行。

有人有解决办法吗？

提前致谢

Answer 1

在 html 中，多个白色 space 被单个 space 替换，因此如果您想在段落中预览，您需要将换行符替换为 <br/>

function MakePreview() {
    var getText = document.getElementById('inputText').value;
    document.getElementById('outputParagraph').innerHTML = getText.replace('\n', '<br/>');
}

Answer 2

在您的 textArea 上使用 wrap="hard"。如果长度大于 textArea 大小，这将有助于换行。对于固定的行和列，您可以在 textarea 中使用 rows="2" cols="20"。

Answer 3

您可以通过将其 white-space 属性设置为 pre:[=16= 来指示段落尊重换行符（以及其他空格，如制表符、空格等） ]

function MakePreview() {
    var getText = document.getElementById('inputText').value;
    document.getElementById('outputText').innerHTML = getText;
}

#outputText {
    white-space: pre;
}

<textarea id="inputText" onkeyup="MakePreview()" rows="4" cols="20"></textarea>
<p id="outputText"></p>

Answer 4

我不确定，是否有可能完全达到您想要的效果（由于不同的字体大小和系列），但这个片段非常接近它。

function makePreview() {
    var text = document.getElementById('inputText').value;
    document.getElementById('outputText').innerHTML = text;
}

.wrapper {
    width: 150px;
}
.wrapper textarea {
    width: 100%;
} 
#outputText {
    position: relative;
    white-space: pre-wrap;
    word-break: break-all;
    border: 1px solid #ccc;
}

<div class="wrapper">
    <textarea id="inputText" oninput="makePreview()"></textarea>
    <p id="outputText"></p>
</div>

想法是将 textarea 和 p 包裹在同一个父级中，以使它们的宽度匹配。 word-break: break-all 和 white-space: pre-wrap "copies" 自动文本换行并在 textarea 内输入新行到 p 元素。

但是，文本可能会在不同的地方被剪切，这取决于使用的字体系列和大小。如果您在两个元素中使用相同的字体，您可以获得更好的匹配。

为什么我的脚本不使用 keyup 换行？

Why does my script not make new lines using keyup?

javascript

textarea

onkeyup