在textarea中换行的实现方法-创新互联
小编给大家分享一下在textarea中换行的实现方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
成都创新互联公司是一家专注于成都网站设计、做网站与策划设计,永平网站建设哪家好?成都创新互联公司做网站,专注于网站建设十年,网设计领域的专业建站公司;建站业务涵盖:永平等地区。永平做网站价格咨询:13518219792html的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中换行的实现方法-创新互联
网站地址:http://scyanting.com/article/jgijh.html