哪些元素可以安全地满足？

Question

我最近在HTML5页面中与contenteditable合作，并在使用某些元素时遇到错误，我想知道在哪里以及如何安全地使用它。

我发现在 ¹ 和Chrome ² 中，使 span 元素具有可疑性会导致一些错误行为。但是，使 div 或section满意可见 ³ 。

一些人提到的指南是，只有块级元素才能成为可信的。但是，Mozilla开发人员网络lists the heading elements h1 through to h6 as block-level elements，并且使标题元素成为可疑的是Firefox ⁴ 中的错误，并且崩溃 Chrome ^{5中的页面}

我喜欢能够使用的不仅仅是div和section，但我不清楚我能真正安全地使用哪些元素。通过安全地，我的意思是在正常条件下使用该元素，我应该能够执行正常的编辑任务，而不会它做出意想不到或有缺陷的事情。我应该可以在其中写入，删除内容，剪切，复制，粘贴和移动文本光标并突出显示文本，而不会出现意外或奇怪的行为。

那么，我真正哪些元素可以安全地满足？有特定的类别吗？安全可信的元素必须符合某些标准吗？

  

^{错误说明：
  1. Firefox 21 w / span：如果文本光标被带到元素的开头或结尾，则元素失去焦点，但如果通过删除内容到达那里则不会失去焦点。突出显示元素的一部分，剪切然后粘贴将在该点将元素拆分为两个，然后在两个部分之间插入一个空白元素 - ，而实际上将您尝试粘贴的文本放在任何位置。
  2. Chrome 27 w / span：如果跨度覆盖多行，例如通过自动换行，剪切和粘贴内容通常会在粘贴的内容后插入换行符   3.除非你进行div显示：inline，在这种情况下，它仍然可以像1中一样失去焦点，但显然只有当你将文本光标移到最后时。我不认为这个元素的“正常”用法   4. Firefox 21 w / heading：选择内容的一部分然后剪切和粘贴将类似于1，在此时将标题元素分成两半，并在两半之间插入第三个​​标题元素。它至少会在你的内容中粘贴你的内容，但现在你有三个标题元素，其中最初只有一个   5. Chrome 27 w / heading：选择一些内容并剪切和粘贴。页面崩溃了。你得到一个“Aw snap！”信息。就是这样。}

按要求提供jsFiddle。

Here's a link to a jsFiddle用于复制上述内容。这很简单，虽然目前唯一没有复制的是丢失焦点的bug。这很简单：

<article style="width: 100px">
    <h1 contenteditable="true">Heading</h1>
    <p>
        <strong>Some adjacent content</strong>
        <span contenteditable="true">Span! This is long enough it will spread over multiple lines.</span>
    </p>

    <div style="display: inline" contenteditable="true">An inline div also with multiple lines.</div>
</article>

Answer 1

在我看来，我认为div是最安全的赌注。您希望真正编辑的任何元素（无论是跨度，标题等），您都可以放在div中并进行编辑，就好像它只是那个元素一样。另外，考虑到你提到的显示：内联问题，你可以在你的可编辑div上使用float：left或float：right来给它一个“内联的感觉”，而不是实际上是内联的。

希望有所帮助！

Answer 2

  

由于这是一个不断发展的功能，显而易见，浏览器供应商支持的低优先级一直是粗略的，并且回归并不罕见。目前的情况正在发展，所以请查看谷歌，CanIUse等，并确保为您的网站访客提供支持，其他一切都没有实际意义......

Firefox中的支持似乎很可靠，至少对于某些元素而言，现在https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content 它适用于Chrome以及我的测试。 CanIUse看起来不错：http://caniuse.com/#feat=contenteditable

但是在不同的浏览器中有许多与此功能相关的不同错误，但对于简单的用例，从2016年8月开始它应该没问题。