在光标位置为新行写入 HTML 标签

Question

我将光标放在 lorem 之后，然后按 Enter

默认情况下，按 enter，chrome 会在此处写入自己的 span 标签。

$("#test").keydown(function(e) {
  if (e.keyCode == 13) {
    e.preventDefault();
    var a = "<br>\n";
    /* here I need something like this:
    write - on - cursor - position(a); */

  };
});

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

<div id="test" contenteditable="true">loremIpsum</div>

Answer 1

删除此属性 e.preventDefault(); 将启用所需的行为。

$("#test").keydown(function(e) {
  if (e.keyCode == 13) {
    /* e.preventDefault(); */
    var a = "<br>\n";

  };
});

#test {
  height: 100px;
  width: 75%;
  padding:10px;
  margin: 10px;
  }

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

<div id="test" contenteditable="true">loremIpsum</div>

在光标位置为新行写入 HTML 标签

Write HTML tags for new line on cursor position

jquery

contenteditable