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

【问题标题】：Why does my script not make new lines using keyup?为什么我的脚本不使用 keyup 创建新行？
【发布时间】：2015-02-09 17:35:05
【问题描述】：

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

这是我的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 那样换行。

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

有人有解决办法吗？

提前致谢

【问题讨论】：

我不想使用 jQuery，因为我首先想训练我的初级 js 技能
HTML 中的段落在哪里？
onkeyup 会触发，如果任何键被按下和向上。这当然是个坏主意
我在没有段落的情况下粘贴了错误的代码。这是代码：
那么，#outputText 是 p 元素而不是 textarea？请修复问题中的代码。

标签： javascript textarea onkeyup

【解决方案1】：

我不确定，是否可以完全实现你想要的（由于不同的字体大小和系列），但是这个 sn-p 非常接近它。

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 元素。

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

【讨论】：

您好，感谢您的帮助。这不是 100% 有效的，只有当你使用空间并输入它时才会产生新的行。如果你只写一个段落，当段落的宽度比文本短时，它会换行，你明白了吗？
没错！这就是解决方案！谢谢你的帮助！！
如果在行尾是一个短词，它也会分散在 2 行中……如何解决？
@JeroenJK 这可能无法用这个 CSS 解决。因word-break: break-all而任意截词。另一方面，如果您省略该属性，则根本不会包装长单词。就像我说过的，这只是接近，但不完全是 OP 所需要的。

【解决方案2】：

您可以通过将其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>

【讨论】：

您好，感谢您的回复。我也使用了代码 sn-p 中的那个示例，但您可以自己尝试通过连续输入无限个字符来尝试。你会看到我的问题。你有解决办法吗？
您希望文本的换行方式与它在 textarea 中的换行方式相同吗？在这种情况下，您需要将段落的宽度设置为与 textarea 相同。
是的，就像你描述的那样，我想包装它在 textarea 中的包装。我也将段落的宽度设置为与 textarea 相同，但没有帮助。

【解决方案3】：

在 html 中，多个空格被单个空格替换，所以如果你想在段落中预览，你需要用 <br/> 替换换行符

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

【讨论】：

感谢您的回复，我想要的是段落自动换行，就像您输入纯文本的方式一样。它工作了 50%，只有当我按下回车时它才会换行

【解决方案4】：

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

【讨论】：