Contenteditable：添加 div 而不是 br答案

【问题标题】：Contenteditable: Add div instead of brContenteditable：添加 div 而不是 br
【发布时间】：2016-12-01 01:11:40
【问题描述】：

我有一个启用了contenteditable 的 div。当按下回车键时，它会插入br，或者当所有内容都清空时（通过删除里面的内容），它也会插入br。

有没有办法控制在这两种情况下插入的内容？例如，我想在按下回车键时插入一个 div。此外，当我删除里面的所有内容时，我想包含一个 div（它更像占位符）。

对于第二部分（即：充当占位符的 div），我知道我可以使用如下 css：

div.example[contenteditable]:empty::before {
  content: "Acts like a placeholder";
}

但是好像当我删除里面的所有东西时，br被插入了，我无法摆脱它。

希望我说的很清楚。无论如何，任何帮助将不胜感激。

谢谢。

【问题讨论】：

你能在处理插入和删除代码的地方添加你的标记和js代码吗

标签： jquery html css contenteditable

【解决方案1】：

您可以通过检查内容长度来处理 Enter 键事件并在插入或删除时包含 div

检查以下sn-p

$(document).ready(function() {

});

jQuery('#editDiv').on("keypress", function(e) {

  if (e.keyCode == 13) {
    $(this).append("<div>new div</div>")
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" id="editDiv">
  hello
</div>

您也可以查看此链接 Jquery Event : Detect changes to the html/text of a div

希望对你有帮助

【讨论】：