Question

在dblclick - DIV替换为TEXTAREA。您可以编辑文本。

模糊 - 将TEXTAREA替换为DIV。新行将替换为“＆lt; br /＆gt;”。

第一个问题 - 位于已修改的文字中 - “＆lt; br /＆gt;”不像文本中的突破或新行，而是像文本“＆lt; br /＆gt;”。如何解决？

第二个问题 - 有一个“＆lt; br /＆gt;”在例子中。当你第一次在示例中编辑文本时，这个“＆lt; br /＆gt;”不会更改为新行，而只会更改为简单空格（＆amp; nsbp; ）。当您第一次尝试编辑原始文本时，为什么会出现此错误？

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

Answer 1

尝试。 html （）而不是。文字（）并更改替换，如

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

请参阅此LINK。您可以将宽度和高度添加到此

Answer 2

请使用以下代码

  $(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标签

在textarea的文本中将/ n更改为<br/>

2 个答案: