javascript - 为什么我的脚本不使用 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

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

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 “复制”自动文本换行并在 textarea 中输入新行到 p 元素。

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