safari - contenteditable，使其为空后，创建一个带有 text-align:center 的元素答案

【问题标题】：safari - contenteditable, after making it empty, creates an element with text-align:centersafari - contenteditable，使其为空后，创建一个带有 text-align:center 的元素
【发布时间】：2014-07-20 08:57:47
【问题描述】：

在野生动物园中，

我有一个带有输入按钮的简单可编辑 div，在删除元素（退格或删除）时，插入符号移动到可编辑 div 的中心，带有一些内联样式的 p 标签，带有 text-align:center 和内联样式“颜色”

<div class="editable" contenteditable="true"> <input type="button" value="inputBtn" /> </div> http://jsfiddle.net/VqCvt/

这是一种仅在 Safari 中观察到的奇怪行为。

【问题讨论】：

已确认。你需要解决什么问题？
见code.google.com/p/chromium/issues/detail?id=226941 和bugs.webkit.org/show_bug.cgi?id=114791。这些错误出现在数十种情况下，需要以自定义方式（硬）处理退格或使用 Mutation Observers 进行后修复。
一年多过去了，这仍然是个问题。苹果干得好！它似乎直接与输入标签相关联。标记似乎总是类似于被删除的输入元素的样式。我还没有找到解决办法，但如果我发现了什么，我会编辑我的帖子。

标签： safari contenteditable

【解决方案1】：

在这篇文章发布一年多之后，这个问题仍然是一个问题。此问题与input 标记直接相关。一旦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();
}

此代码对我的情况有效，因为input 是我的代码中除了text 节点和<br> 之外的唯一元素，所以我首先检查以确保没有input 元素，然后确保 innerText 为空（这表示在我的情况下没有内容，您可能必须为“空”状态自定义条件）。确认空状态后，我将旧 div 替换为相同规格的新 div，而用户永远不会注意到。一个非常奇怪的解决方法，但我认为contenteditables。

您也可以去掉 Safari 生成的 HTML，但对于我来说，这个解决方案要简单得多。我希望这对将来的某人有所帮助。

【讨论】：