当我在ContentEditable的内容末尾按Enter键时,为什么要复制DOM?

时间:2016-11-17 14:09:51

标签: javascript dom contenteditable

虽然我在网页编辑器方面做得很满意,但我遇到了一些奇怪的行为。

如果我在contenteditable元素中按Enter键,则当前行的DOM将被复制到下一行。然后再次按回车键,再次复制DOM。 但这种情况只发生在插入符号内容结束时。顺便说一句,只有文本内容不会发生。 我在最新的Chrome浏览器上制作了这种情况。

<div id="editor" contenteditable="true" style="border:1px solid #000; width:500px; height:200px;">
    <p><span class="name">content</span></p>
</div>

<div id="before" style="border:1px solid blue; width:500px; height:100px;"></div>
<div id="afterEnterKeyPressed" style="border:1px solid red; width:500px; height:100px;"></div>  

$('#editor').on('keyup', function(e) {
    var keyCode = e.keyCode;
    if (keyCode === 13) {
        $('#afterEnterKeyPressed').text($('#editor').html());
    }   
});

$('#before').text($('#editor').html());

以下是演示:https://jsfiddle.net/qgpcdtpe/1/

0 个答案:

没有答案