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

bre*_*ine 5 html contenteditable richeditabletext

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

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

IE:      <p></p>
Chrome:  <div><br></div>
Safari:  <div><br></div>
Firefox: <br />
Opera:   <br />
Run Code Online (Sandbox Code Playgroud)

(使用此 JSFiddle 演示自行测试。)

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

<textarea></textarea>
Run Code Online (Sandbox Code Playgroud)

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

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

小智 1

如果使其内容可编辑,则隐式允许用户更改 HTML 的内容。

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

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

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

为了演示这一点,这是一个非常简单的页面:

<html>
<body>
<div contentEditable="true"> Some things.</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

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

  • Enter- ( 创建一个新段落(将先前的文本包装在p标签中)。
  • 输入“ Words”,选择它并点击Crtl + b- 文本现在被包裹在<strong>标签中。
  • 点击-现在插入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>
Run Code Online (Sandbox Code Playgroud)

如果您想完全控制进入该区域的内容,我建议使用所见即所得编辑器,或者替代方案,接受浏览器可能知道它在做什么并让它做它的事情,这样您就不需要担心它。