HTML 多行文本框多个换行

在本文中，我们将介绍HTML的多行文本框中如何实现多个换行的效果。

阅读更多：HTML 教程

什么是多行文本框？

多行文本框是HTML表单中的一种输入元素，它允许用户输入多行文本内容。与单行文本框不同，多行文本框可以容纳更多的文本，并且可以自动换行。

在HTML中，可以使用<textarea>元素创建多行文本框。<textarea>元素设置了rows和cols属性，分别用于定义文本框中可显示的行数和列数。当文本框的内容超过所设置的行数时，垂直滚动条将出现以便用户查看整个文本。

下面是一个示例的HTML代码，展示了一个包含3行和30列的多行文本框：

<textarea rows="3" cols="30"></textarea>

多行文本框的换行问题

多行文本框会自动换行，但是在HTML中敲击回车键并不能实现多个换行的效果。以往的做法是，在需要换行的地方手动插入<br>标签，例如：

<textarea rows="3" cols="30">
第一行<br>
第二行<br>
第三行
</textarea>

这样就可以实现在多行文本框中显示多个换行的效果。但是这种做法比较繁琐，需要手动在每一行的末尾添加<br>标签。

CSS样式实现多个换行

除了使用<br>标签，在多行文本框中显示多个换行的另一种方法是使用CSS样式。通过设置CSS的white-space属性为pre-wrap，可以实现在多行文本框中保留输入时的换行，而不需要手动插入<br>标签。

下面是一个示例的HTML代码，展示了如何使用CSS样式实现多个换行的效果：

<style>
    textarea {
        white-space: pre-wrap;
    }
</style>

<textarea rows="3" cols="30">
第一行
第二行
第三行
</textarea>

通过设置white-space: pre-wrap;，多行文本框在保留输入时的换行，而不需要手动添加<br>标签。

JavaScript实现多个换行

另一种实现多个换行的方法是使用JavaScript。我们可以在多行文本框输入内容时，监听回车键的按下事件，并在按下回车键时插入换行符号\n。

下面是一个示例的HTML代码，展示了如何使用JavaScript实现多个换行的效果：

<textarea id="myTextarea" rows="3" cols="30"></textarea>

<script>
    document.getElementById("myTextarea").addEventListener("keydown", function (e) {
        if (e.keyCode === 13) { //按下回车键
            e.preventDefault(); //阻止默认的换行行为
            var textarea = document.getElementById("myTextarea");
            var start = textarea.selectionStart;
            var end = textarea.selectionEnd;
            var value = textarea.value;
            textarea.value = value.substring(0, start) + "\n" + value.substring(end);
            textarea.selectionStart = textarea.selectionEnd = start + 1;
        }
    });
</script>

在上面的代码中，我们使用了addEventListener()方法来监听多行文本框的keydown事件。当按下回车键时，我们通过e.preventDefault()方法阻止了文本框默认的换行行为，并使用substring()方法和\n字符插入了一个换行符号。