莆仙生活网
当前位置: 莆仙生活网 > 知识库 >

textarea换行

时间:2025-02-18 13:23:05 编辑:莆仙君

textarea 怎么强制换行

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

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

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

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

附:
wrap属性定义输入内容大于文本域时显示的方式,可选值如下:
默认值是文本自动换行;当输入内容超过文本域的右边界时会自动转到下一行,而数据在被提交处理时自动换行的地方不会有换行符出现;

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

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

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


textarea:进行文本换行

textarea内的换行便是以换行符的形式实现,换行符也能用于textarea 当我们尝试将\n用于一般div eg: document.querySelector(".a").innerHTML= "12\n1"; 显示: 未显示换行,这是因为在默认情况下空白会被忽略,所以无论是文本里的空白、换行都会被当做一个空格处理, 若想显示空白,需添加属性white-space: pre; 保留换行和空白 或者pre-line 保留换行,忽略空白 增添white-space: pre;显示: 这时候获取innerHTML,输出: 12 1, /\n/.test(document.querySelector(".a").innerHTML) // true, eg: document.querySelector(".a").innerHTML= "1 2\n1"; 显示: 通过审查元素,可以发现可编辑div自带white-space: pre;属性!因此文本空白和换行符都对它有效 而可编辑div内直接进行换行操作,换行又是如何实现的? 进行换行: 再输出innerHTML 1 2 1 11111 因此: 对于可编辑div,换行符有效,但它本身的换行是通过div来实现的,这不同于textarea! 一般pre 对于一般pre,文本空格与换行符都有效,也自带white-space: pre;属性。 可编辑pre 类似于可编辑div,换行符有效,本身的换行通过增添div实现。