HTML 在文本框（textarea）中显示换行符

在本文中，我们将介绍如何在HTML的文本框（textarea）中显示换行符。

在HTML中，文本框（textarea）是一种用于输入和显示多行文本的元素。它通常用于接收用户输入的评论、文章或其他长文本内容。然而，由于HTML默认忽略多个连续的空格和换行符，文本框中的换行符将不会被正常显示。

为了解决这个问题，我们可以使用特殊的编码代替换行符，并通过CSS样式来显示它们。接下来，我们将详细介绍三种常用的方法。

阅读更多：HTML 教程

使用
标签

标签是HTML中用于插入换行符的标记。在普通的文本中，通过使用
标签，可以在文本中插入一个换行符。然而，在文本框（textarea）中，HTML默认会将标签作为文本显示，而不会被解释为换行符。

为了确保
标签在文本框中起作用，我们可以使用JavaScript来替换文本框中的换行符。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    #myTextarea {
      white-space: pre-wrap;
    }
  </style>
</head>
<body>
  <textarea id="myTextarea"></textarea>

  <script>
    var textarea = document.getElementById("myTextarea");
    textarea.addEventListener("input", function() {
      var text = textarea.value;
      text = text.replace(/\n/g, "<br>");
      textarea.innerHTML = text;
    });
  </script>
</body>
</html>

在上面的示例中，我们给文本框添加了一个id，并在JavaScript中获取到该元素。然后，我们为文本框添加了一个”input”事件的监听器，每当用户输入时触发。在事件处理函数中，我们使用正则表达式将文本中的换行符\n替换为<br>标签，并将处理后的文本重新赋值给文本框的innerHTML。通过CSS样式white-space: pre-wrap;，我们确保文本框中的空格和换行符被正确解析和显示。

使用“\r\n”字符

除了使用
标签之外，一种更简单的方法是使用“\r\n”字符来表示换行符。在Windows操作系统中，换行符通常由“\r\n”表示。在HTML中，我们可以使用
实体来表示这个字符。

以下是一个使用“\r\n”字符在文本框中显示换行符的示例：

<!DOCTYPE html>
<html>
<body>
  <textarea rows="5" cols="30">
</textarea>
</body>
</html>

在上面的示例中，我们使用
实体作为文本框的默认文本，这表示一个换行符。通过指定适当的行数和列数，我们可以在文本框中显示出多个换行符。

使用CSS样式

除了以上两种方法，我们还可以使用CSS样式来显示换行符。通过CSS的white-space属性，我们可以控制空白符的处理方式。在文本框中，我们可以将white-space属性设置为pre或pre-wrap，以确保连续的空格和换行符被正确解释和显示。

以下是一个使用CSS样式在文本框中显示换行符的示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    #myTextarea {
      white-space: pre-wrap;
    }
  </style>
</head>
<body>
  <textarea id="myTextarea"></textarea>
</body>
</html>