5

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

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

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

（用这个 JSFiddle 演示自己测试一下。）

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

<textarea></textarea>

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

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

4

2 回答 2

2

如果您使其内容可编辑，您就隐含地允许用户更改 HTML 的内容。

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

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

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

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

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

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

  • Enter- （创建了一个新的段落（将先前的文本包装在p标签中）。
  • 键入“ Words”，选择它并点击Crtl + b- 文本现在包含在<strong>标签中。
  • Hit -现在插入Shift + Enter换行符 ( )。<br>
  • 输入“ More words”，选择它并点击Crtl + i它现在在<em>标签中为斜体。

源代码应如下所示：

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

如果您想完全控制进入该区域的内容，我建议您使用 WYSIWYG 编辑器或替代方法，接受浏览器可能知道它在做什么并让它做它的事情，这样您就不必担心它.

于 2014-01-17T01:13:46.217 回答
1

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

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

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

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

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

于 2014-01-17T01:38:59.730 回答