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，保留換行信息

回答

相關問題