题 哪些元素可以安全地满足?


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

我发现制作一个 跨度 元素contenteditable导致Firefox中的一些错误行为1 和Chrome2。但是,制作一个 DIV 要么 部分 contenteditable看起来完全安全3

一些人提到的指南仅限于此 块级元素 应该是满足的。但是,Mozilla开发者网络 列出标题元素 H1 通过 H6 作为块级元素在Firefox中,使一个标题元素满足是错误的4 并且可以 紧急 Chrome中的页面

ID 喜欢 能够使用的不仅仅是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按要求。

这是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>

21
2018-06-19 01:06


起源


在HTML5中,任何元素都可以编辑。 - j08691
@ j08691如果理论上情况如此,那实际情况并非如此。上述错误都发生在html5页面上。 - doppelgreener
你能发布你的代码吗? @ j08691是正确的,因为任何元素都可以编辑,但是期望的结果可能会有所不同,因为对于用户而不是编码器来说,自然而然。话虽如此,理论上可以在'硬编码'元素中放置一个contenteditable元素以防止OTT使用 - 一个例子是允许用户增加图像的大小,但你不希望他们增加它太多了,把图像放在一个不可信的“锁定”div中,但是这种编码风格效率极低。 - redditor
浏览器是否有处理contentEditable的错误,这是一个意外吗?没有真正的规则来说明哪些元素是安全的,你必须自己找出并在发现问题时在每个浏览器上存档错误。 - AlfonsoML
如果你希望在任何元素上满足非bug /奇怪的浏览器行为,那么你会感到失望。 - Tim Down


答案:


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

希望有所帮助!


2
2018-06-27 13:51



实际上,给出元素:before和:之后伪元素停止了焦点错误! :) - doppelgreener
太好了!很高兴你能搞清楚一些事情。请注意:之前IE 8及更早版本不是那个伪类的忠实粉丝:) - Graham Robertson


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

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

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


0
2018-06-24 12:39



关于contentEditable,浏览器几乎是静态的。他们修复这种虫子的速度非常慢,而且大多数虫子已经被人们所知和报道多年,但由于它们不计入酸性测试,所以它们被忽略了。当然,随着时间的推移,事情会发生变化,但并不总是在正确的方向 code.google.com/p/chromium/issues/detail?id=226941 - AlfonsoML
由于目前可信赖的发展并没有多大进展,因此在4周之后,答案不会过时,更不用说在字节干涸之前。无论如何,这是网络,HTML5和东西 不 改变,所以答案将过时 终于,但许多事情也是如此:关于如何在CSS中垂直对齐内容的答案,随着CSS的改进而过时。 - doppelgreener
AlfonsoML是对的。我每天都在WYSIWYG编辑器上工作了1。5年(而Alfonso正在追踪这个功能的时间更长)而且我不记得任何情况会有最不明显改善的情况。事实上,我记得有很多新的错误(就像Alfonso所链接的整个主题一样),虽然它们通常比固定的更容易被我们看到。无论如何 - 五年是网络世界的一个完整时代,但遗憾的是不包括 contenteditable。 - Reinmar
关于CSS的答案仍将适用于该版本的CSS规范,即使有更新版本可以不同的方式完成。 SO的重点是建立一个规范问题和答案的数据库。在目前的形式中,问题并不是针对任何事情,规范,日期,浏览器版本而定,并且将会如此迅速地过时,以至于一年之后它将对访问者产生刺激。 @AlfonsoML两年前对这个问题的答案今天仍然完全适用?如果你知道它写它... - Jonas Schubert Erlandsson
我没有时间或意愿创建这样的支持表,但你可以打赌,没有什么真正改变,所以我不明白你为什么这么久才提到我。从问题中的错误列表中我只能发现Chrome不再崩溃,但似乎其余的问题都在那里,我链接的铬虫仍然活着并且踢,所以时间显示浏览器不能正常工作CONTENTEDITABLE。正如Reinmar所说,唯一真正的答案是“无”。无论浏览器是否经过测试,所有元素都在某种程度上都有错误。 - AlfonsoML