Question

当用户在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并将其放入我的元素中！”

Answer 1

如果您将其内容设为可编辑，则隐式允许用户更改HTML的内容。

按回车应插入某种换行符 - 关闭段落（）并开始新段落（）或输入换行符（ ）。 HTML中的两个都需要HTML标记，因为标准换行符（例如\n或\n\r）被渲染为单个空格这一简单事实，这不是用户期望的 - 所以插入原始换行作为“软换行”是没有意义的，并且最终会导致用户无意中抨击他们的输入键在你的网站上生气，因为他们认为不应该插入中断。

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

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

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

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

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

输入 - （制作了一个新的paragaph（将先前的文本包装在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编辑器，或者替代，接受浏览器可能知道它在做什么并让它做它的事情所以你不需要担心它。

Answer 2

没有跨浏览器方式禁用或强制可编辑div来解释输入按键与浏览器的意图不同。

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

这个想法是控制可编辑div的浏览器，而不是你如果你试图实时摆弄输出，你就像一名乘客偶尔试图从驾驶员手中抢夺轮子。

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

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

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

2 个答案: