在textarea中换行的实现方法-创新互联

小编给大家分享一下在textarea中换行的实现方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

html的textarea内容显示的时候怎么换行？输入的时候换了行，但是读取出来的时候是连在一起的，要怎么才可以显示换行？

textarea换行方式一：利用pre

1、在textarea输出的div中添加如下css样式：

.content{
　　white-space:pre;
　　}

2、利用

标签来输出textarea的内容：
这是textarea中的内容....
该方式的优缺点：
优点:
不需要区别浏览器,正则校验替换,保存输入的符号
缺点:
但是超出长度部分不会折行显示,在同行显示,需要添加white-space的样式
white-space:pre-wrap||pre-line;
pre标签样式,可能会改变预期样式字体大小,颜色,字体类型等,需要全局设置初始值
textarea换行方式二：将\n\r替换成br标签
利用正则，写法如下：
input.replace(/\r/ig,'').replace(/\n/ig,'
')
注意:需要dangerouslySetInnerhtml:{\_\_html:text}解析。
该方式的优缺点：
优点:
可设置自动换行，可不修改样式,如果统一处理包裹标签有可能会影响
缺点:
dangerouslySetInnerhtml有XSS漏洞,建议使用htmlescape处理
import_from'lodash';
　　constcreatehtml=encodedhtml=>({
　　__html:encoded(createhtml)
　　});
　　functionencoded(html){
　　return_.escape(html).replace(/\r/g,'').replace(/\n/g,'
')
　　}
　　exportfunctionnewlineReplaceBr(input){
　　if(input){
　　returnh.span({
　　dangerouslySetInnerHTML:createHtml(input)
　　})
　　}
　　else{
　　return''
　　}
　　}
以上是“在textarea中换行的实现方法”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
                

                分享标题：在textarea中换行的实现方法-创新互联                

                分享URL：http://dzwzjz.com/article/jgijh.html