Question

我有一个满足的div。它始于一些孩子。还有一个textarea。按下“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，即复制粘贴的结果。

（这与我想要清理复制粘贴文本有关。这似乎涉及将文本移动到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();
            }
        });
    }

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

3 个答案: