在文本区域中按Enter键时，创建段落中的新行

Question

document.getElementById('area').onkeyup=keydown;
function keydown (event) {
if (event.target.id=='area' && event.which==13) {
document.getElementById('arsh').innerHTML+="\n";
     }
}

Arsh是我的段落ID，我想在其中添加新行，为什么不起作用？有人可以帮帮我吗？我只想在文本区（ID area）按Enter键时向我的段落（ID arsh）添加一个新行。

这是HTML代码：

<textarea ID="area" class="in">
Message
</textarea>
<br />
<br />
<p ID="tiesh" class="sh">
</p>
<br />
<br />
<p ID="arsh" class="sh">
</p>
<br />
</div>

我基本上想做的就像在stackoverflow中，当你在文本区域按下回车键时，段落会跳到下一行。

- Csak Zoli

---

输入键不是已经在文本区域中创建了新行吗？ - keune

在文本区域中是可以的，但我想要它创建在名为“arsh ID”的段落中。 - Csak Zoli

你的HTML长什么样？你可以制作一个Fiddle吗？ - HellaMad

这只是代码的一小部分，但在这里它无法工作。 - Csak Zoli

也许我没有表达清楚，我有一个文本区域，一切都正常，我的问题是在文本区域下面，我有一个段落应该显示文本区域的值，但是当我按回车键时，它只会在文本区域中换行，而在段落中什么也不发生。 - Csak Zoli

Answer 1

使用CSS，为#arsh（或任何您想要渲染新行的元素）添加此属性。

white-space: pre-wrap;

- Austin Brunkhorst

---

关闭它，它能正常工作。有没有办法让文本向右移动？因为现在它是居中的。 - Csak Zoli

在CSS中添加属性text-align: right。除非问题不符合社区准则，否则没有所谓的“关闭”。只需将此答案标记为解决方案即可。 - Austin Brunkhorst

Answer 2

document.getElementById('arsh').innerHTML=document.getElementById("area").value.replace(/\n/g,'<br />')

这将完成工作。

- user3510753

Answer 3

在屏幕上，换行符（\n）不会呈现为新行。您可能需要添加 HTML 断行符：

document.getElementById('arsh').innerHTML+="<br />";

- cbp

---

首先要决定 - 您想要HTML换行还是新行换行。您需要知道它们之间的区别。 - cbp

我想要一个新的换行符，所以我尝试使用“\n”，但我希望它能在文本区域下面的段落中起作用。 - Csak Zoli

接下来，您需要使用调试器来查找回车键是否被捕获。根据您的浏览器，可以搜索Firebug（Firefox）、Chrome调试器或IE调试器。或者，在添加换行符的代码行之前添加代码alert('hi')。然后运行代码并查看是否调用了警报。 - cbp

你知道吗，"\n"在屏幕上不会呈现为换行符？ - cbp

但是在Stackoverflow中，他们是如何做到的呢？当您在下面的文本区域按Enter键时，段落会换行。 - Csak Zoli

StackOverflow的评论编辑器比你的代码复杂得多。我相信它会将每个段落呈现在单独的div中。 - cbp

Answer 4

<p style="white-space: pre-wrap;"><?php echo $row['description_text'];?></p>

- Mømĕn ẶłmĦsĕĕrỷ

---

这个问题是关于JavaScript，为什么要使用PHP？ - Csak Zoli

由于它更容易，BEC比JS更好。 - Mømĕn ẶłmĦsĕĕrỷ

这对我很有效，没有使用js。不知道为什么人们会因为它属于js组而投反对票。 - ashim888