textarea 换行 inputtext输入框自动换行

编程之家2026-05-14761次浏览

这篇文章给大家聊聊关于textarea 换行，以及inputtext输入框自动换行对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。

textarea内的换行便是以换行符的形式实现，换行符也能用于textarea

当我们尝试将

用于一般div

eg: document.querySelector(".a").innerHTML="12

1";

显示:

未显示换行，这是因为在默认情况下空白会被忽略，所以无论是文本里的空白、换行都会被当做一个空格处理，

若想显示空白，需添加属性white-space: pre;保留换行和空白或者pre-line保留换行，忽略空白

增添white-space: pre;显示:

这时候获取innerHTML，输出: 12 1,

/.test(document.querySelector(".a").innerHTML)// true，

eg: document.querySelector(".a").innerHTML="1 2

1";

显示:

通过审查元素，可以发现可编辑div自带white-space: pre;属性！因此文本空白和换行符都对它有效

而可编辑div内直接进行换行操作，换行又是如何实现的？

进行换行:

再输出innerHTML

1 2 1<div>11</div><div>111</div>

因此:对于可编辑div，换行符有效，但它本身的换行是通过div来实现的，这不同于textarea!

一般pre

对于一般pre，文本空格与换行符都有效，也自带white-space: pre;属性。

可编辑pre

类似于可编辑div，换行符有效，本身的换行通过增添div实现。

通常情况下，当用户在输入文本区域中键入文本后，浏览器会将它们按照键入时的状态发送给服务器。只有用户按下 Enter键的地方生成换行。

如果您希望启动自动换行功能（word wrapping），请将 wrap属性设置为 virtual或 physical。当用户键入的一行文本长于文本区的宽度时，浏览器会自动将多余的文字挪到下一行，在文字中最近的那一点换行。

wrap="virtual"将实现文本区内的自动换行，以改善对用户的显示，但在传输给服务器时，文本只在用户按下 Enter键的地方进行换行，其他地方没有换行的效果。

wrap="physical"将实现文本区内的自动换行，并以这种形式传送给服务器，就像用户真的那样键入的。因为文本要以用户在文本区内看到的效果传输给服务器，因为使用自动换行是非常有用的方法。

如果把 wrap设置为 off，将得到默认的动作。

希望对你有点帮助。

㊣

方法1：在textarea中增加属性wrap="hard"

方法2：设置 wrap="virtual"，文本区会包含两行文本，并在单词"makes"后面换行。但是只有一行文本被传送到服务器：没有嵌入新行字符。

方法3：设置 wrap="physical"，文本区会包含两行文本，并在单词"makes"后面换行，这时发送给服务器两行文本，单词"makes"后的新行字符将分隔这两行文本。

方法1测试过是可以的，方法2和方法3还未测试

附：

wrap属性定义输入内容大于文本域时显示的方式，可选值如下：

默认值是文本自动换行；当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现；

Off，用来避免文本换行，当输入的内容超过文本域右边界时，文本将向左滚动，必须用Return才能将插入点移到下一行；

Virtual，允许文本自动换行。当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现；

Physical，让文本换行，当数据被提交处理时换行符也将被一起提交处理。

关于textarea 换行到此分享完毕，希望能帮助到您。