textarea换行的简单介绍

http://www.itjxue.com  2023-01-08 18:27  来源:未知  点击次数: 

a-textarea的不满一行就换行问题

输入回车符。

在textarea中输入回车符,在js读取textarea中的值有\r\n然后到业务层转换到string中就有可能变成空格形式然后被存入数据库,当在取出此值的时候则会变成空格的形式。

textarea,计算机语言,指的是标签定义多行的文本输入控件。

移动端textarea标签能支持手动换行吗

移动端textarea标签能支持手动换行。

1、在写入数据库之前,把textarea中的内容做一下替换操作,把\r\n替换成,这样读出来显示在页面上就会有换行了。

2、写入数据库时不变,从数据库中读取出来显示在页面上时,把php的回车符替换成,这样也能起到同样的效果。

textarea 换行

1、获取到需要赋值给textarea的内容

2、显示的内容中,有需要换行的地方插入换行标签\r\n

3、将内容复制给textarea显示即可。

示例:

有一个textarea:

textarea id="myarea"/textarea

方法:

var obj = document.getElementById('myarea');

obj.innerText='2223333\r\n1111111111';

vue textarea空格和换行处理

应用需求:在textarea中输入文字,提交给后台后,后台输出在另一个页面,文字按原格式显示。

在提交接口前处理绑定的数据

方法一:可以用replace替换空格和换行

方法二:识别换行后 分别加上p标签

这里需要注意的是 在传给接口前还需要将添加p标签后的数组形式转换成字符串

方法三:使用属性contentEditable

属性contentEditable:用于设置或返回元素的内容是否可编辑。

给任意标签如div或p标签设置属性contentEditable = true,则p标签或div标签等为可编辑标签

如何在TextArea里实现换行

有两个方案,一是在写入数据库之前,把textarea中的内容做一下替换操作,把\r\n替换成,这样读出来显示在页面上就会有换行了。 二是写入数据库时不变,从数据库中读取出来显示在页面上时,把php的回车符替换成,这样也能起到同样的效果。

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 div11/divdiv111/div

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

一般pre

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

可编辑pre

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

(责任编辑:IT教学网)

更多

推荐程序员考试文章