js / jquery：将contenteditable div复制到textarea，保留换行信息

我有一个满足的div。 它始于一些孩子。 还有一个textarea。 按下“enter”时，div的内容将复制到文本框中。

我的问题是，通过编辑div制作的任何新元素都不会以与原始子元素相同的格式复制; 文字一起刷了。 他们的HTML看起来一样，所以这很奇怪。 我需要看看新线的起点。

 
line 1
 
line 2
 
  // jquery $(document).keypress(function(e) { if(e.which == 13) { //enter $('#ta').val($('#e').text()); } }); 

我编辑div，添加几行并按Enter键。 div现在看起来像这样（Chrome检查元素）：

 
 
line 1
 
line 2
 
line 3
 
line 4
  

这也显示为4行。 但是，在textarea中，它看起来像这样：

 line 1 line 2line3line4 

我需要它看起来与页面上的4个单独的行相同。

在这个例子中，我可以看看div并自己添加换行符。 但是，可编辑的div实际上可能包含更复杂的html，即复制粘贴的结果。

（这与我想要清理复制粘贴文本有关。这似乎涉及将文本移动到textarea然后再返回。但是，我需要知道是否有新行开始。）

Answer 1

更改java脚本：

 // jquery $(document).keypress(function(e) { if(e.which == 13) { var result = ''; $('#e > div').each(function (i, e) { result = result + $(e).text().trim() + '\r'; }); $('#ta').val(result); } }); 

对我来说很好用！ 希望这对你有所帮助！

Answer 2

使用oninput事件列表器

 contenteditableDiv.addEventListener("input", function(){ textAreaElement.value = contenteditableDiv.innerText; }); 

Answer 3

我想，它更像是一个输入文本..我希望有人帮忙！

  function enteredDiv(cont) { $cont.keypress(function (e) { var keycode = (e.keyCode ? e.keyCode : e.which); if (keycode == 13) { e.preventDefault(); var result = $cont.text().trim(); $cont.text(''); e.stopImmediatePropagation(); } }); }