javascript - Contenteditable div 在重新加载后隐藏内容

Question

出于文本编辑目的，我在网站中使用了 contenteditable div。当我编辑一些文本时，div 高度 正在动态增长，下面网站上的所有其他元素都向下移动。这就是我想要的。最后，我通过 Ajax 将内容存储在服务器上。到目前为止一切正常。

问题是当我从服务器重新加载内容时，contenteditable div 的高度不会自动增长以显示其所有内容。相反，它的高度保持在初始大小。

顺便说一句，这适用于所有浏览器。

有没有人有一些提示来解决这个问题？

编辑

这是html和javascriptcontendeditable相关代码

<div class="editable"    contentEditable=true  onkeyup="autoGrowSave(this)"  onblur="update(this)" ></div>

function autoGrowSave (oField) {
  if (oField.scrollHeight > oField.clientHeight) {
    oField.style.height = oField.scrollHeight + "px";
  }
  }

我使用上面的 javascript 函数来自动增长 contenteditable。其实我什至不知道我是否需要它。下面 Abhitalks 的 jsFiddle 示例不需要。嗯...我必须尝试没有...

为了在服务器上存储内容，我使用了 onblur 属性，效果非常好。

Answer 1

我自己回答这个问题。感谢 Abhitaks jsFiddle，我发现了仅限于自动调整高度的问题。为此，我当然感谢您的回答；-)

在 CSS 声明中，我为 editable 类指定了 20px 的初始高度。因此 contenteditable 无法自动调整其高度。反过来，我需要 javascript 函数 autoGrow() 来弥补这个问题。虽然这种“疯狂”的方法在编辑内容时有效，但在重新加载内容时却不起作用。

因此解决方案是消除 CSS 声明中的 height 并摆脱 javascript 函数 autoGrow()。现在它完美运行了!