safari-contenteditable将其置为空后，将创建一个文本为align:center的元素

在狩猎中

我有一个带有输入按钮的简单edtable div，在删除元素（退格或删除）时，插入符号移动到edtable div的中心，带有一些内联样式的p标记，带有文本对齐：中心和内联样式“颜色”

---

这只是在safari中观察到的一种奇怪行为。

在这篇文章发表一年之后，这个问题仍然是一个问题。此问题与

输入

标记直接相关。一旦

input

标记位于

contenteditable

元素中，Safari将尝试使文本的样式与输入相似（我通过观察

type=“text”

与

type=“button”

的结果样式不同来确认这一点）。这是一只非常奇怪的虫子。我已经找到了一个可行的解决办法，但它非常荒谬。我的解决方案基本上是在我的主要输入不再有内容时进行测试，然后删除该元素并重新添加它

<div id="content-wrapper">
  <div contenteditable="true" id="content" role="textbox"></div>
</div>

在我的“keyup”侦听器中，我输入了以下代码

// Grab main editable content div
var element = document.getElementById("content");

// Check empty state conditions.  These work for me, but you may have your own conditions.
if (element.getElementsByTagName("input").length == 0 &&
        element.innerText.trim().length == 0) {
    // Grab parent container
    var elementContainer = document.getElementById("content-wrapper");

    // Add a copy of your element to the same specifications.  If you have custom style attributes that you set through javascript, don't forget to copy them over
    elementContainer.innerHTML = '<div contenteditable="true" id="content" role="textbox"></div>';

    // Re-focus the element so the user doesn't have to click again to keep typing
    element = document.getElementById("content");
    element.focus();
}

//抓取主要可编辑内容div
var元素=document.getElementById（“内容”）；
//检查空状态条件。这些对我有用，但你可能有自己的条件。
if（element.getElementsByTagName（“输入”）.length==0&&
element.innerText.trim（）.length==0）{
//抓取父容器
var elementContainer=document.getElementById（“内容包装器”）；
//将元素的副本添加到相同的规范中。如果您有通过javascript设置的自定义样式属性，请不要忘记复制它们
elementContainer.innerHTML=''；
//重新聚焦元素，以便用户不必再次单击以继续键入
元素=document.getElementById（“内容”）；
元素focus（）；
}

这段代码对我的情况有效，因为除了

text

节点和

之外，

input

是我代码中唯一允许的元素，所以我首先检查以确保没有

input

元素，然后确保innerText为空（这表示在我的情况下没有内容，您可能必须自定义“空”状态的条件）。一旦确认空状态，我将使用相同规范的新div替换旧div，用户从未注意到。这是一个非常奇怪的问题，有一个黑客的解决方法，但我认为

contenteditables

---

您可能还可以删除Safari生成的HTML，但对于我来说，此解决方案要简单得多。我希望这对将来的人有所帮助。

已确认。您需要解决什么问题？请参阅和。这些错误出现在许多情况下，需要以自定义方式处理退格（硬）或者与突变观察员一起进行后期修复。一年多之后，这仍然是一个问题。做得好的苹果！它似乎直接绑定到输入标记。标记似乎总是类似于被删除的输入元素的样式。我还没有找到解决方法，但如果我找到什么，我会编辑我的帖子。