javascript - HTML5 contenteditable 新行跳转两次

Question

在下面的示例中，有一些关于新行的奇怪行为。例如，在 Chrome 中，当您按 Enter 两次时，行光标会向下跳 3 行，而不是 2 行。在 Firefox 中，它总是这样跳。

jQuery("#message").on("keydown", function (event) {
  if (event.keyCode === 13) {
    document.execCommand('insertHTML', false, '\n\n');
    return false;
  }
});

jQuery("#message").on("keyup", function () {
  jQuery("#outcome").html(jQuery(this).html());
});

#message, 
#outcome {
  width: 100%;
  height: 100px;
  border: 1px solid black;
  white-space: pre;
}

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

<div id="message" contenteditable></div>

<div id="outcome"></div>

编辑:这段代码似乎在除 Firefox 之外的所有浏览器中都能完美运行。

jQuery("#message").on('keydown', function (event) {
  var elem = $(this);
  if (event.keyCode === 13 || event.keyCode === 10) {
    event.preventDefault();

    if (JSON.stringify(elem[0].innerHTML).slice(-3).slice(0, 2) === '\\n' || !elem[0].innerHTML.length) {
      return false;
    }

    document.execCommand('insertHTML', false, '\n\n');
    return false;
  }
});

jQuery("#message").on("keyup", function () {
  jQuery("#outcome").html(jQuery(this).html());
});

#message, 
#outcome {
  width: 100%;
  height: 100px;
  border: 1px solid black;
  white-space: pre;
}

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

<div id="message" contenteditable></div>

<div id="outcome"></div>

Answer 1

它可能会跳转 3 行，因为 Enter 键会注入(inject)一个新行，然后再注入(inject) 2 个新行。

尝试这样做:

jQuery("#message").on("keydown", function (event) {
    if (event.keyCode === 13) {
        event.preventDefault();
        document.execCommand('insertHTML', false, '\n\n');
        return false;
    }
});