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= "12\n1"

显示:

通过审查元素，可以发现可编辑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实现。

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

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

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

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

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

方法三：使用属性contentEditable

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

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

强制插入cr和lf的转义字符即可，如下：

<textarea cols='60' rows='8'>This is my statement one. This is my statement2</textarea>

代表cr 和 lf

---