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>

此外，我有输入的textarea和输出的段落。但输出并没有像textareas那样创造一条新线。

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

有人有解决方案吗？

提前致谢

Answer 1

您可以通过将其white-space属性设置为pre来指示段落尊重新行字符（以及其他空格，如制表符，空格等）：

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 2

我不确定，是否可以实现您想要的（由于不同的字体大小和系列），但这个片段非常接近它。

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元素输入换行符。

但是，根据使用的字体系列和大小，文本可能会在不同的位置进行剪切。如果你在两个元素中使用相同的字体，你可以获得更好的匹配。

Answer 3

在html中，多个空格被单个空格替换，因此如果要在段落中预览，则需要用<br/>替换换行符

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

Answer 4

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

为什么我的脚本不使用keyup创建新行？

4 个答案: