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

我有一个contenteditable div。它开始与一些孩子。还有一个textarea。当按下“enter”时，div的内容被复制到文本框中。js/jquery：将contenteditable div复制到textarea，保留换行信息

我的问题是，任何通过编辑div创建的新元素都不会使用与原始子元素相同的格式进行复制;文字被一起淹没。他们的html看起来一样，所以这很奇怪。我需要看看新行开始的位置。

<div id = "e" contenteditable = "true"> 
    <div>line 1</div> 
    <div>line 2</div> 
</div> 

<textarea id = "ta"></textarea> 

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

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

<div id = "e" contenteditable = "true"> 
    <div>line 1</div> 
    <div>line 2</div> 
    <div>line 3</div> 
    <div>line 4</div> 
</div>

这也显示为4行。然而，在textarea它看起来像这样：

line 1 
line 2line3line4

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

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

（这关系到我想要清理复制粘贴的文本，这似乎涉及移动文本到文本区域，然后再返回。但是，我需要知道，如果一个新行开始。）

来源

2013-05-16 user984003

更改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); 
    } 
});

适合我！希望这可以帮助你！

来源

2013-05-16 17:26:56 Fals

与div的伟大工程，但HTML可能不是div的，例如，如果我在OL列表复制粘贴。然后它不起作用:(对不起，如果这个要求被隐藏在问题中进一步下降 – user984003

@ user984003你可以根据需要更改选择器，我发布$（'＃e> div'）来解决问题！你可以更改为任何类，例如$（'＃e> div，ol'）例如将得到'e'内的任何文本，这些文本位于div或ol中。希望这可以完成这个问题！ – Fals

对，但事情是知道所有选择器如果它是一个块跨度，或者是一个float：left，它会变得非常复杂，我希望复制到textarea能够为我解决这个问题，就像手动复制粘贴到textarea一样。 – user984003

-1

我想，它就像一个inputtext more ..我希望能帮助别人！

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

来源

2014-10-12 13:08:16 Erdogan

这只是在按ENTER键时删除内容，看不到这是怎么回事与这个问题有关 –

使用oninput事件听者

contenteditableDiv.addEventListener("input", function(){ 

     textAreaElement.value = contenteditableDiv.innerText; 

     });

来源

2017-05-22 08:55:21

哦，哇，四年后！:)我不再使用contenteditable所以我甚至不能测试这是否正确，甚至不记得我的问题是什么;）希望它可以帮助别人。 – user984003

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

回答

相关问题