Question

在下面的示例中，对于新行有一些奇怪的行为。对于Chrome中的一个示例，当您按两次输入时，行光标会向下跳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行，因为输入键会注入一个新行，然后再注入2行。

尝试这样做：

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

HTML5 contenteditable新行跳两次

1 个答案: