0

我有一个内容可编辑的 div。它从一些孩子开始。还有一个文本区域。当按下“enter”时，div 的内容被复制到文本框。

我的问题是，通过编辑 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，添加几行并按 Enter。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，即复制粘贴的结果。

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

4

3 回答 3

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

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

于 2013-05-16T17:26:56.007 回答
0

使用 oninput 事件监听器 

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

       textAreaElement.value = contenteditableDiv.innerText;

      });
于 2017-05-22T08:55:21.753 回答
-1

我认为，它更像是一个输入文本。我希望能帮助别人！

        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-12T13:08:16.640 回答