Javascript：在可竞争的 div 中按回车键时如何触发退格键？

Question

由于一些复杂的原因，当用户在 contenteditable div 中按下回车键时，我不得不硬编码来模仿换行的正常行为，我的尝试是当按下回车键时，首先，然后创建两个 br 标签（工作正常），然后通过模仿用户按下退格键删除最后一个 br（工作不正常）。

我的尝试如下，它无法在插入符号位置模仿用户的退格键。

html:

<div id="hithere" style="border:1px solid black" contenteditable="true" autocomplete="off" spellcheck="false"></div>

Javascript：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 

<script>
$('div[contenteditable]').keydown(function(e) {

    if (e.keyCode === 13) {

                 document.execCommand('insertHTML', false, ' <br><br>');
                     $(function() {
                     var bre = $.Event('keypress');
                        bre.keyCode= 8; // enter
                    document.trigger(bre);
                    });
    }

    //   // prevent the default behaviour of return key pressed
    return false;
  });
</script>

Answer 1

我看到了您可能遇到但没有写的问题： <br /> 已插入，但当用户继续键入时，文本会插入到中断上方。

您可以使用 \r 和 \n 两个组件（回车和换行）将换行符作为文本插入

document.execCommand('insertText', false, '\r\n');

请看这里： https://jsfiddle.net/svArtist/6o5ao1bm/1/