textarea回车换行的方法

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

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

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

代码如下:

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Ubuntu的发音 Ubuntu,源于非洲祖鲁人和科萨人的语言,发作 oo-boon-too 的音。了解发音是有意...
    萤火虫de梦阅读 99,942评论 9 468
  • linux资料总章2.1 1.0写的不好抱歉 但是2.0已经改了很多 但是错误还是无法避免 以后资料会慢慢更新 大...
    数据革命阅读 14,188评论 2 33
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,707评论 25 709
  • Vim几句话介绍Vim是Unix系统上的文本编辑软件(你该不会不知道什么是文本编辑软件吧!),在windows上也...
    何必遠方阅读 8,417评论 0 3
  • “你写的文章走心吗?” 这是个问题,也是个标准。 每次在网上发完文章后,总是不自觉的定期打开手机看看阅读量,关注下...
    Shelly_小白羊阅读 2,806评论 5 6