且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

html简单设置textarea回车换行的方法应用!

更新时间:2022-08-14 23:06:53

    在实际的项目开发中,我们需要输入文本,这样在html的input文本框,远远不能满足我们实际的需求,而采用文本编辑器插件又太过于复杂,所以有时候我们使用textarea来实现文本输入!那么怎么实现后台Enter换行在前台显示换行操作呢?


    首先在页面显示的换行其实是一个<br/>而我们输入Enter换行输入的事一个\n所以我们需要把\n替换成<br/>,我见过一个哥们,就是在后台转来转去,因为你在后台转的话,修改的时候,又把<br/>带到文本框中去了,非常不方便,并且操作复杂!


那么换个思路我们可以直接在页面上操作这个功能?

下面是简单的文本输入框


1
<td colspan="3"><textarea rows="10" cols="30"  name="exhInfoManageBo.exhDesc" id="textarea_addExh" style="width: 400px;" ></textarea></td>

这是在页面上显示的


1
<td  colspan="3" id="tb">${exhInfoManageBo.exhDesc}</td>

怎么转换呢?


1
2
3
4
5
//将输入的展陈描述换行显示
     $(function(){
     var temp=  $("#tb").text().replace(/\n/g,'<br/>');
     $("#tb").html(temp);
      });









本文转自 小夜的传说 51CTO博客,原文链接:http://blog.51cto.com/1936625305/1319930,如需转载请自行联系原作者