textarea回车换行的方法

法一:

textarea 多行回车换行,显示的时候换行设置:
在使用textarea标签输入多行文本的时候,如果没有对多行文本显示处理,会导致没有换行的情况
Css 属性:white-space
white-space 属性用于设置如何处理元素内的空白,其中包括空白符和换行符。


只要在显示内容的地方将该属性设置为white-space: pre-line或者white-space:pre-wrap,多行文本就可以换行了。
 

 法二:

在日常的开发中,我们经常会遇到需要在textarea中输入文本,然后在前台显示的情况,但是很多时候在后台编辑的换行,在前台中并不能显示,用富文本编辑器似乎又太麻烦,所以今天介绍一种简单的办法

其实产生这个问题的原因很简单:
在textarea中输入换行时,换行符是 \n
在HTML页面中,换行符是 <br/>

所以我们解决这个问题的思路也很简单,就是在前台页面中,将\n转换成<br/>即可

代码如下:

  <!-- 前台显示控件 -->
  <article id="articleDetail">  </article>
//将输入的展陈描述换行显示
$(function(){
    var temp=  $("#articleDetail").text().replace(/\n/g,'<br/>');
    $("#articleDetail").html(temp);
});

如此一来,我们就可以实现文本框输入的换行了,当然对于有更高编辑需求的用户,我们还是需要使用富文本编辑器,但是对于简单的记录功能来说,textarea已经够用了


链接:https://www.jianshu.com/p/dfeb7b5c44b4
链接: textarea 多行回车换行_Web前端大世界的博客-CSDN博客_多行文本换行符

  • 4
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值