textarea:进行文本换行

textarea:进行文本换行,第1张

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中的内容做一下替换 *** 作,把\r\n替换成,这样读出来显示在页面上就会有换行了。 二是写入数据库时不变,从数据库中读取出来显示在页面上时,把php的回车符替换成,这样也能起到同样的效果。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/12197982.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-21
下一篇 2023-05-21

发表评论

登录后才能评论

评论列表(0条)

保存