前端答疑-换行如何输出在页面上

javascript/jquery

浏览数:304

2020-5-26

工作中我们有下面几种方式收集用户输入的内容

  1. input 输入框,单行,整体样式,纯文本。
  2. textarea 输入框,多行,整体样式,纯文本。
  3. contentEditable,多行,独立样式,富文本。
  4. 其他富文本编辑器,多行,独立样式,富文本。

在不想使用那么重的富文本编辑器的情况下,又想可以换行,那么 textarea 就是我们的不二之选。

下面我们就来说一下,如何在回显的时候也显示换行。

测试地址

方案一:textarea 显示

既然我使用 textarea 输入的,那么我使用 textarea 显示总可以吧。
测试地址

textarea 方案优点

  1. 无 xss 注入风险
  2. 无需特殊处理,内部就认识 \n ,空格也认识

textarea 方案缺点

  1. 需要设置不可编辑

    1. Readonly
    2. Disabled
  2. 需要设置不可缩放

    1. resize:none
  3. 无法自动撑开内容区域

    1. 需要 js 辅助计算,具体代码我就不写了。原理就是构造一个和当前 textarea 一样大的 div,然后使用 div 的高度。一般用于可以输入的 textarea 自动变大。

方案二:v-html、innerHTML、.html()

既然我们不识别 \n,那我们就把他转换成标签来显示。
这个方案最大的问题就是千万小心 xss 问题。

测试地址

优点

  1. 可以自动撑开内容区

缺点

  1. xss 注入风险,需要转义为实体编码。
  2. 空格还是不识别。

方案三:v-text、innerText、textContent、.text()

这个方案也就 innerText 还可以。因为 innerText 会自动转换 \n<br>

测试地址

优点

  1. 无 xss 注入问题

缺点

  1. 只有 InnerText 会自动转换换行
  2. 不支持空格。

方案四:特殊标签 <pre>

这个方案就很理想了。

测试地址

优点

  1. 支持空格
  2. 支持换行
  3. 兼容性极好

缺点

  1. 需要使用特定标签?这也不算 bug 吧。
  2. 不换行。。。

方案五:white-space

基于方案四,其实还有对应的css方案,那就是 white-space
测试地址

缺点

  1. 兼容性问题吧

优点

  1. 属性值较多,可以适配各种场景

微信公众号:前端linong

结语

这么多操作,你使用哪种呢?或者你还有什么方案呢?

作者:linong