在Internet Explorer浏览器中，使用contentEditable DIV功能时，每次按下Enter键都会创建一个新段落(<p></p>)，而Firefox则会创建一个<br/>标签。
正如这里所讨论的，可以通过JavaScript拦截Enter键按下事件，使用range.pasteHTML来创建一个<br/>标签。但是这样做会破坏Undo菜单；一旦按下Enter键，您将无法撤消过去的操作点。
我如何强制contentEditable元素在按Enter键时创建单行换行符，而不会破坏Undo功能？
虽然不是一个确切的解决方案，但这是另一个解决方法。如果您使用以下标记：
<div contenteditable="true">
<div>
content
</div>
<div>
然后按下 enter 将会创建新的 div 标签而不是 p 标签。
<p>换行的状态。 - Dan Fabulich在输入换行时按住Shift键，而不是在输入整段文字时按住Shift键。默认情况下，在Firefox中，对于包含一个段落的contenteditable区域，这种行为是相同的。
<div contenteditable="true">
<p>If you are typing here</p>
<div>
在it技术相关中，使用<BR>代替<P>标签（在IE9中测试过。在旧版本中，<BR>后可能需要nbsp;，如(pasteHTML("<br> "))）
将其用于keydown事件:
if (e.keyCode == 13) {
var range = document.selection.createRange();
range.pasteHTML("<br> ");
range.moveStart("character", 0);
range.moveEnd("character", -1);
range.select();
return false;
}
假设您要将可编辑的内容发布到服务器。因此，在用户编辑时，您不应该真正关心是否有段落或换行符标记，因为您可以在提交之前（或者如果您喜欢，在服务器上）解析HTML并用换行符替换段落的实例。这使得UNDO队列对用户保持有效，但是让您的HTML尽可能干净。
我进一步假设您将确切地知道哪些DIV元素将成为contentEditable。在提交表单之前，您可以将每个可编辑的div运行通过以下函数：
function cleanContentEditableDiv(div) {
var htmlString = div.innerHTML;
htmlString = htmlString.replace(/<\/p>/gim,"<br/>");
htmlString = htmlString.replace(/<p>/gim,"");
return htmlString;
}
你需要在循环中调用这个函数（遍历所有可编辑的DIV，使用一个名为ceDivs的数组），像这样：
ceDivs[i].contentEditable = false; // to make sure IE doesn't try to coerce the contents again
然后：
ceDivs[i].innerHTML = cleanContentEditableDiv(ceDivs[i]);
如果你不想在提交时进行操作的话，对此进行改进（特别是这个情况），可能是在任何其他时间清理每个这样的div的内容（例如onblur），并将每个ceDiv的内容分配给它自己的隐藏表单元素以供稍后提交。结合上面提到的CSS建议使用，这可能适合你。它没有严格保留你的要求（即，它没有让Javascript使IE的行为与其编码下的行为有所不同），但实际效果相同。用户得到了他们想要的，你也得到了你想要的。
在此期间，您还可以清理IE中的空格字符串。如果用户键入多个空格（如某些人在句号后仍然这样做），则IE插入的不是[space][space]，而是[space] ，一个初始空格字符（String.fromCharCode(32)）加上与空格运行中剩余数量相同的 实体。
也许很难做到完美无误。但是，可以通过使用CSS来去除段落标签周围的默认边距，使<p>标签“看起来”像单行换行符：
p { margin: 0; }
这种方法存在一个缺点：如果用户需要在contentEditable元素中复制/粘贴文本，那么该文本在元素内部可能会呈现单倍行距，但在元素外部则是双倍行距。
更糟糕的是，在一些情况下，IE将自动检测到双倍换行符，并用<p>标签替换它们，这将破坏已粘贴文本的格式。
IE在按下 Enter 键时将文本节点绑定到 <p> 标签上。要实现换行，请使用 Shift+Enter。Firefox在按下 Enter 键时添加一个 <br> 标签。要使这种行为在两个浏览器中通用，您可以执行以下操作：
假设有以下标记：
<div id="editableDiv" contentEditable="true"></div>
Javascript [假设下面的代码在函数闭包中，以便不会用全局变量使页面臃肿]:
(function () {
//Initialize _shiftKeyPressed to false
var _shiftKeyPressed = false;
$('#editableDiv').live('keydown', function (e) {
if (e.keyCode == 16) {
// SHIFT key is pressed
_shiftKeyPressed = true;
}
}).live('keyup', function (e) {
if (e.keyCode == 16) {
// SHIFT key is release
_shiftKeyPressed = false;
}
}).live('keypress', function (e) {
if (e.keyCode == 13 && !_shiftKeyPressed && !jQuery.browser.msie) {
// Insert a PARAGRAPH in Firefox instead of a BR
// Ignores SHIFT + ENTER
document.execCommand("insertParagraph", false, true);
}
})
})();
注意：此脚本是在 jQuery < 1.9 版本中使用已弃用的 $.browser。
<span contenteditable="true"></span>。您可能不想在Chrome中这样做，因为焦点看起来很奇怪。您可能需要实现自己的onfocus和onblur代码。