Question

我想找到一个简单的解决方案，因为它在chrome上工作，因为它适用于chrome，我认为它可能是按钮执行的默认操作，并阻止了contenteditable的操作。

以下是使用chrome的代码片段，而不是使用纯HTML的firefox，没有css没有js：

经过测试但没有工作：

firefox开发人员版本61.0b7（64位）
firefox开发人员版本61.0b9（64位）
firefox nightly版本62.0a1（2018-05-14）（64位）
firefox nightly版本62.0a1（2018-05-29）（64位）
Internet Explorer版本11.48.17134.0

我在镀铬和边缘测试并且工作得很好。

此处的代码段：

<button>
  <div contenteditable="true">
    This text can be edited by the user.
  </div>  
</button>

https://jsfiddle.net/8s3a3pak/1/

编辑：该按钮可以包含任何类型的元素，它可以是图像，div [可编辑或不可编辑]，p [可编辑或不编辑]，h1，h2，h3 ... [可编辑或不编辑]

如果没有解决方案，请您提供可能的原因，或者可能是问题的链接或错误跟踪。

Answer 1

我还没有找到解决方案（因为Firefox必须修复它），但是在阅读contenteditabl html属性的specs之后，我找到了替代方案。

下面您将看到它的工作原理，尝试在每个图像上复制和粘贴图像，并查看图像如何追加到contenteditable元素上。不知道哪个应该是correct behavior。

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content -->
<h1>
  DIV is editable and child of BUTTON
</h1>
<p>(NOT WORKING ON FIREFOX)</p>
<button>
  <div contenteditable="true">
    This text can be edited by the user.
  </div>  
</button>

<hr>

<p>(Some are working well, others partially)</p>

<h1>
  DIV is child, BUTTON is editable
</h1>
<button contenteditable="true">
  <div>
    This text can be edited by the user.
  </div>
</button>

<h1>
  BUTTON is editable and child of DIV
</h1>
<div>
  <button contenteditable="true">
    This text can be edited by the user. 
  </button>
</div>

<h1>
  DIV is editable, BUTTON is child
</h1>
<div contenteditable="true">
  <button >
    This text can be edited by the user. 
  </button>
</div>

<h1>
  DIV and BUTTON (child) are editable
</h1>
<div contenteditable="true">
  <button contenteditable="true">
    This text can be edited by the user. 
  </button>
</div>

<h1>
  DIV(child) and BUTTON are editable
</h1>
<button contenteditable="true">
  <div contenteditable="true">
    This text can be edited by the user.
  </div>
</button>

https://jsfiddle.net/8s3a3pak/3/

如何在firefox中使按钮内的一个contenteditable元素工作？

1 个答案: