CODEWITHSUNDEEP
jquerytextareanewlinebreak
Patrik
Patrik

Reputation: 1327

Change /n to <br /> in text from textarea

On dblclick - DIV is replaced with TEXTAREA. You can edit text.

On blur - TEXTAREA is replaced back with DIV. And new line are replaced with "<br />".

First problem - is in edited text - "<br />" is not like breaked or new line in text, but just like text "<br />". How to fix it ?

Second problem - there is one "<br />" in example. When you edit text in example for the first time, this "<br />" is not changed to new line, but only to simple space (&nsbp;). Why there is this error, when you try edit text original for the first time ?

jsFiddle DEMO

HTML

<div id="meText">Click to edit <br /> this text.</div>

jQuery

$(function(){
    $("#meText").live('click',function(){
        var originalDiv = this;
        $(this).replaceWith($("<textarea></textarea>").text($(this).text().replace(/<br\s?\/?>/g,"\n")).width($(this).width()).height($(this).height()).blur(function(){$(this).replaceWith($(originalDiv).text($(this).val().replace(/\r\n|\r|\n/g,"<br />")));}));
    });
});

Upvotes: 0

Views: 3819

Answers (2)

Mahesh K S
Mahesh K S

Reputation: 775

please use below code 

  $(this).replaceWith($("<textarea></textarea>").text($(this).html().replace(/<br\s?\/?>/g,"\n")).width($(this).width()).height($(this).height()).blur(function(){$(this).replaceWith($(originalDiv).html($(this).val().replace(/\r\n|\r|\n/g,"<br />")));}));

you are using some place text() instead of html(). if we use text() it eliminate html tag

Upvotes: 1

GautamD31
GautamD31

Reputation: 28773

Try with .html() instead of .text() and change the replace like

$(function(){
$("#meText").on('click',function(){
    var originalDiv = this;
    $(this).replaceWith($("<textarea></textarea>").html($(this).text().replace(/\n/g, "<br />")));
  });
});

See this LINK.You can add your width and height to this

Upvotes: 2

Related Questions