Question

在Internet Explorer上，每次按Enter键时，contentEditable DIV都会创建一个新段落（），而Firefox会创建一个 标记。

正如here所述，可以使用JavaScript拦截Enter keyPress，并使用range.pasteHTML来创建 。但这样做打破了撤销菜单;一旦你按Enter键，就不能再撤消该点了。

如何强制contentEditable元素在Enter上创建单个换行符而不会破坏撤消？

Answer 1

不是一个确切的解决方案，而是另一种解决方法。如果您使用标记：

<div contenteditable="true">
<div>
content
</div>
<div>

然后按输入将创建新的div代码而不是p代码。

Answer 2

当您按Enter键进行休息时按住shift键，不要按住完整段落。默认情况下，这种行为在Firefox中是相同的，给定一个包含段落的可疑区域：即

<div contenteditable="true">
    <p>If you are typing here</p>
<div>

Answer 3

据推测，您要将可编辑内容发布回服务器。因此，在用户编辑时，您不应该真正关心是否有段落或中断标记，因为您可以在提交之前解析HTML（如果您愿意，可以在服务器上解析）并使用中断替换段落实例。这使得UNDO队列对用户保持运行，但是可以让你的HTML尽可能干净。

我将进一步假设您将确切知道哪些DIV元素将成为contentEditable。在提交表单之前，您可以通过以下函数运行每个contentEditable div：

function cleanContentEditableDiv(div) {
  var htmlString = div.innerHTML;
  htmlString     = htmlString.replace(/<\/p>/gim,"<br/>");
  htmlString     = htmlString.replace(/<p>/gim,"");
  return htmlString;
}

你在循环中调用它（循环遍历所有contentEditable DIV，使用我将调用ceDivs的数组），如下所示：

ceDivs[i].contentEditable = false; // to make sure IE doesn't try to coerce the contents again

然后：

ceDivs[i].innerHTML = cleanContentEditableDiv(ceDivs[i]);

对此的改进（特别是如果你不想在提交时这样做），可能是在你喜欢的任何其他时间（onblur，无论如何）清理每个这样的div的内容并分配每个内容。 ceDiv到它自己的隐形表单元素供以后提交。与上面您自己的CSS建议结合使用，这可能对您有用。它不会保留你对字母的字面要求（即，它不会使Javascript使IE的行为与它在封面下编码的行为不同）但是对于所有实际目的而言，效果是相同的。用户得到他们想要的东西，你得到你想要的东西。

当你在它时，你也可能想要在IE中清理空间字符串。如果用户键入多个空格（有些人仍然在句点之后），IE插入的内容不是[space] [space]而是[space]＆amp; nbsp;，一个初始空格字符（String.fromCharCode（32））加上尽可能多的＆amp; nbsp;在空间运行中留下的实体。

Answer 4

使用 代替（在IE9中测试。nbsp;  之后旧版本中可能需要(pasteHTML("  "))

在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;
}

Answer 5

可能无法做到这一点。但是，通过使用CSS删除段落标记周围的内置边距，可以使标记看起来看起来像单行换行符一样：

p { margin: 0; }

这种方法有一个缺点：如果用户需要在contentEditable元素中复制/粘贴文本，则文本可能在元素内部呈单行间隔，但在元素外部是双倍行距。

更糟糕的是，至少在某些情况下，IE会在粘贴过程中自动检测双线中断，并用标记替换它们;这会弄乱粘贴文本的格式。

Answer 6

IE在 Enter 按键上用标签绑定文本节点。要实现换行 Shift + 输入。 Firefox在 Enter 按键上添加 标记。要使这两种浏览器的行为一致，您可以执行以下操作：

假设以下标记：

<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＆lt; 1.9使用已弃用的$.browser

Answer 7

使用Internet Explorer时，请考虑使用。您可能不希望使用Chrome执行此操作，因为重点看起来很有趣。您可能希望实现自己的onfocus和onblur代码。

强制IE contentEditable元素在Enter键上创建换行符，而不会破坏撤消

7 个答案: