Javascript 为什么我的脚本不使用keyup生成新行？

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

这是我的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那样生成新行

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

有人有解决办法吗

---

提前感谢

在html中，多个空格被单个空格替换，因此如果您想预览段落，您需要将换行符替换为

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

函数MakePreview（）{
var getText=document.getElementById（'inputText'）。值；
document.getElementById（'output段落'）。innerHTML=getText.replace（'\n'，'
'）；
}

在文本区域使用

wrap=“hard”

。如果长度大于textArea的大小，这将有助于新行。

---

对于固定的行和列，您可以在textarea中使用

rows=“2”cols=“20”

。

您可以通过将段落属性设置为

pre

，指示段落尊重新行字符（以及其他空格，如制表符、空格等）：

函数MakePreview（）{
var getText=document.getElementById（'inputText'）。值；
document.getElementById（'outputText'）。innerHTML=getText；
}

#输出文本{
空白：预处理；
}

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

函数makePreview（）{
var text=document.getElementById（'inputText'）。值；
document.getElementById（'outputText'）。innerHTML=text；
}

.wrapper{
宽度：150px；
}
.包装器文本区域{
宽度：100%；
} 
#输出文本{
位置：相对位置；
空白：预包装；
单词break：打破一切；
边框：1px实心#ccc；
}

我不想使用jQuery，因为我首先要训练我的主要js技能。HTML中有段落？如果按下任何键并向上移动，就会触发onkeyup。当然，这不是一个好主意。我粘贴了错误的代码，但没有段落。下面是代码：

因此，

#outputText

是一个

p

元素，而不是

textarea

？请修改问题中的代码。谢谢你的回复，我想要的是段落自动换行，就像你在平面文本中键入的方式一样。它工作了50%，只有当我按下回车键时，它才会产生一个新的线条嗨，谢谢你的回复。我也使用了代码片段中的那个例子，但请您自己尝试一下，在一行中键入无限个字符。你会明白我的问题。您有解决方案吗？您希望文本与在textarea中包装的文本相同吗？在这种情况下，您需要将段落的宽度设置为与textarea相同。是的，如您所述，我想将其包装在textarea中。我还将段落的宽度设置为文本区域的宽度，但没有帮助。嗨，谢谢你的帮助。这并不是100%有效，只有当您使用空格并输入它时，才会生成新行。如果你只写一个段落，当段落的宽度比文本短时，它会产生新的行，你明白吗？@theMaster如果我正确理解了你的评论，我已经在代码中解决了这个问题（将

分词
属性添加到
#outputText
规则）。没错！这就是解决办法！谢谢你的帮助！！如果这是一个简短的字在最后一行，它也将分布在2行。。。如何解决这个问题？@JeroenJK可能无法用这个CSS解决这个问题。由于
断字：全部断开
，单词被任意剪切。另一方面，如果省略属性，那么长单词就不会被包装。正如我所说，这只是接近，但不完全是OP需要的。