前端答疑-换行如何输出在页面上
2020/3/17 14:01:22
本文主要是介绍前端答疑-换行如何输出在页面上,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
工作中我们有下面几种方式收集用户输入的内容
- input 输入框,单行,整体样式,纯文本。
- textarea 输入框,多行,整体样式,纯文本。
- contentEditable,多行,独立样式,富文本。
- 其他富文本编辑器,多行,独立样式,富文本。
在不想使用那么重的富文本编辑器的情况下,又想可以换行,那么 textarea
就是我们的不二之选。
下面我们就来说一下,如何在回显的时候也显示换行。
方案一:textarea 显示
既然我使用 textarea
输入的,那么我使用 textarea
显示总可以吧。
测试地址
textarea 方案优点
- 无 xss 注入风险
- 无需特殊处理,内部就认识
\n
,空格也认识
textarea 方案缺点
-
需要设置不可编辑
readonly
disabled
-
需要设置不可缩放
resize:none
-
无法自动撑开内容区域
- 需要js辅助计算,具体代码我就不写了。原理就是构造一个和当前textarea一样大的div,然后使用div的高度。一般用于可以输入的textarea自动变大。
方案二:v-html、innerHTML、.html()
既然我们不识别\n
,那我们就把他转换成标签来显示。
这个方案最大的问题就是千万小心xss问题。
测试地址
优点
- 可以自动撑开内容区
缺点
- xss注入风险,需要转义为实体编码。
- 空格还是不识别。
方案三:v-text、innerText、textContent、.text()
这个方案也就 innerText
还可以。因为 innerText
会自动转换\n
为<br>
。
测试地址
优点
- 无xss注入问题
缺点
- 只有innerText会自动转换换行
- 不支持空格。
方案四:特殊标签 <pre>
这个方案就很理想了。
优点
- 支持空格
- 支持换行
- 兼容性极好
缺点
- 需要使用特定标签?这也不算bug吧。
- 不换行。。。
方案五:white-space
基于方案四,其实还有对应的css方案,那就是 white-space
。
测试地址
缺点
- 兼容性问题吧
优点
- 属性值较多,可以适配各种场景
微信公众号:前端linong
结语
这么多操作,你使用哪种呢?或者你还有什么方案呢?
这篇关于前端答疑-换行如何输出在页面上的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05HTML 颜色
- 2024-10-05HTML 颜色名
- 2024-10-01AntDesign-Form-rules学习:轻松入门教程
- 2024-10-01classnames学习:轻松掌握前端中的类名管理
- 2024-09-30前端案例资料:新手入门必读教程
- 2024-09-30前端编程资料:新手入门必备教程
- 2024-09-30前端培训资料:新手入门必读教程
- 2024-09-30滚动吸顶项目实战:从入门到上手
- 2024-09-29HTML学习:span标签教程详解
- 2024-09-29HTML基础:button标签教程