Замените /n на ‹br /› в тексте из textarea

При dblclick - DIV заменяется на TEXTAREA. Вы можете редактировать текст.

При размытии: TEXTAREA снова заменяется на DIV. И новая строка заменяется на "‹br />".

Первая проблема – в редактируемом тексте – "‹br />" – это не разрыв или новая строка в тексте, а просто текст "‹br />". Как это исправить?

Вторая проблема — в примере есть один "‹br />". Когда вы редактируете текст в примере в первый раз, этот "‹br />" не меняется на новую строку, а только на простой пробел (). Почему появляется эта ошибка, когда вы пытаетесь отредактировать текстовый оригинал в первый раз?

ДЕМО-версия jsFiddle

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 />")));}));
    });
});

jquery textarea newline break
person Patrik    schedule 18.06.2013    source источник
comment
@Partik мой ответ работает на тебя..??   -  person Gautam3164    schedule 18.06.2013

Ответы (2)


arrow_upward
2
arrow_downward

Попробуйте использовать .html() вместо .text() и измените replace как

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

См. эту ССЫЛКА. Вы можете добавить свою ширину и высоту к этому

person Gautam3164    schedule 18.06.2013
comment
Спасибо, вы были правы насчет text() и html(), но ваш пример не работает. Когда редактирую dbclik - все та же ошибка. - person Patrik; 18.06.2013

arrow_upward
1
arrow_downward

пожалуйста, используйте код ниже

  $(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 />")));}));

вы используете какое-то место text() вместо html(). если мы используем text(), он удаляет тег html

person Mahesh    schedule 18.06.2013