如何防止浏览器将 HTML 插入到 contenteditable 元素中答案

【问题标题】：How to prevent browser from inserting HTML into a contenteditable element如何防止浏览器将 HTML 插入到 contenteditable 元素中
【发布时间】：2014-01-17 00:58:58
【问题描述】：

当用户在 contenteditable 元素中插入换行符时，浏览器会将 HTML 插入元素中。

这是您在各种浏览器中点击[Enter] 时得到的结果：

IE:      <p></p>
Chrome:  <div><br></div>
Safari:  <div><br></div>
Firefox: <br />
Opera:   <br />

（用this JSFiddle demo自己测试。）

当用户没有插入任何 HTML 时，有没有办法让浏览器不插入 HTML？当然，我可以使用

<textarea></textarea>

...这确实与我想要的非常相似，但是，我不想要严格的“纯文本”输入，我会使用 Javascript 在可编辑元素中添加和修改 HTML。

我考虑在用户键入时不断地删除所有 HTML，只允许保留我创建的特殊类的 HTML。然而，这似乎不是一个很好的解决方案。是否有类似wrap='soft' 或其他方式来表示“停止编写 HTML 并将其放入我的元素中！”

【问题讨论】：

标签： html contenteditable richeditabletext

【解决方案1】：

如果你让它内容可编辑，你就隐含地允许用户改变 HTML 的内容。

按回车键应该插入某种换行符 - 或者关闭一个段落 () 并开始一个新段落 ()，或者输入一个换行符 ( )。两者在 HTML 中都需要 HTML 标记，因为标准换行符（例如 \n 或 \n\r）被呈现为单个空格，这不是用户所期望的 - 因此插入原始换行符因为“软包装”没有意义，并且最终会导致用户无能为力地敲击他们的回车键，因为他们认为应该插入中断时没有插入中断，因此对您的网站感到愤怒。

一个更有趣的事实是，如果用户突出显示某些文本，他们可以（或应该）使用键盘快捷键将文本加粗和斜体，这将再次插入 HTML。

没有编写 Javascript 来覆盖此行为，我不确定您是否可以禁用插入 HTML 标记的 Enter 键以呈现请求的换行符。

为了证明这一点，这里有一个非常简单的页面：

<html>
<body>
<div contentEditable="true"> Some things.</div>
</body>
</html>

（至少在 Internet Explorer 中）如果您双击文本，它将变为可编辑。移动到行尾并键入以下内容：

Enter - （创建一个新的段落（将前面的文本包装在p 标签中）。
输入“Words”，选择它并点击Crtl + b - 文本现在被包裹在 标签中。
点击 Shift + Enter - 现在插入换行符 ( )。
键入“More words”，选择它并点击Crtl + i 现在它在 标签中变为斜体。

来源应该是这样的：

<html>
<body>
<div contentEditable="true">
  <p>Some things.</p>
  <p>
    <strong>Words</strong>
    <br>
    <em>More words</em>
  </p>
</div>
</body>
</html>

如果您想完全控制进入该区域的内容，我建议您使用 WYSIWYG 编辑器，或者接受浏览器可能知道它在做什么并让它做它的事情，这样您就不需要放心吧。

【讨论】：

嘿嘿，事情是，我正在构建一个所见即所得的编辑器......有点。在大多数情况下，我实际上并不介意用户插入的 HTML，只要它是有意的（如您的示例中所示）。 [Enter] 导致 HTML 困扰我的原因是因为很难记住不要点击 [Enter]，并且因为它在浏览器之间不一致。

【解决方案2】：

没有跨浏览器的方式来禁用或强制可编辑的 div 以不同于浏览器预期的方式解释 enter 按键。

此外，不同的浏览器会对新行做不同的事情。有些会在 标签内换行，有些会添加 。

这个想法是控制可编辑 div 的是浏览器，而不是你。
如果您尝试实时调整输出，您将像乘客一样偶尔试图从驾驶员手中抢走方向盘。

您甚至不能保证从这样的 div 中获取关键事件。例如，您的小提琴似乎在 IE11 中不起作用。

我宁愿像这个非常 SO 编辑器那样做：使用 textarea 进行用户输入，并在另一个不可编辑的 div 中生成您想要的任何丰富的 HTML。

【讨论】：

不是真的。您可以在所有主流浏览器中成功拦截按键并插入自己的内容。
可以，就像you can barely manage to stay on track while snatching the wheel from the driver's hands :)。
好的，我不同意默认浏览器行为是可变的，并且用您自己的行为替换它很难做到正确。但是，始终可以获取关键事件并做自己的事情。
@TimDown 好吧，OP 说他考虑将  s 从 div 内容中删除有点乱。尝试对 Enter 键进行跨浏览器拦截会更麻烦，恕我直言。