为什么当我试图在html上的文本区域内显示文本时，它会在一行中显示所有内容

Why when I try to display the text inside a textarea on html it display eveything in one line?

本文关键字：文本 显示 一行 html 区域 为什么      更新时间：2023-09-26

我有以下代码：

 <body> 
 <form>    
     <textarea id="textfield"></textarea> 
     <input type="button" onclick="func1()" value="Post"> 
   </form>  
   <p id="para"></p>
</body>

当我在textarea中键入所有特殊标签<a>,<br>等时，当我在<p>中显示它们时，它们会被忽略。我键入的所有内容都会显示在一行上，甚至我按下回车键或使用<br>都无关紧要，textarea似乎在取用html标签，并将它们变成一个简单的文本。

这是我用来在html:中显示文本区域的功能

function func1()
{            
      document.getElementById("para").innerHTML=document.getElementById("textfield").innerHTML;
}

如何从文本区域获取文本并正常显示在屏幕上（不是一行）。如何为不知道如何使用标签的用户修改文本区域？按下时，应将简单返回转换为<br

首先，对于文本区域，应该使用value，而不是innerHTML。像这样。。。

document.getElementById("para").innerHTML=document.getElementById("textfield").value;

现在，针对单行问题。在文本区域中，新行由''n分隔。在你的divs中不要工作。因此，您必须将它们替换为<br>标签。所以重写你的代码片段。。。

document.getElementById("para").innerHTML=document.getElementById("textfield").value.replace(/'r'n|'r|'n/g,"<br />");

文本区域中的文本不是html。它只是文本，包含规则的换行符"'n"。要显示它们，您需要将文本包含在pre标记中，或者将"'n"替换为<br>。

我会做后者，因为如果文本中没有中断，pre根本不会中断，所以您将有一条长行和一个滚动条。

<textarea>不接受HTML并对其进行解释。如果您希望用户能够在不知道tag names 的情况下修改文本，我认为您正在寻找的是富文本编辑器

相关文章：