Question

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

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

BTW，对所有浏览器都是如此。

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

修改

这是html和javascript contendeditable相关代码

<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()。现在它完美无缺！

重新加载后，contenteditable div隐藏内容

1 个答案: