Javascript 键入新字符后获取contentEditable div height

我目前有一个固定宽度和灵活高度的contentEditable div，它必须根据用户输入的长度增加或减少

问题是，考虑到以下代码，我将根据最后键入的字符获取contentEditable的高度，这是我的代码：

<!-- THE JS FUNCTION THE GETS THE DIV CALLED title HEIGHT-->
function setInTitle() {

        var titleHeight = document.getElementById('title').offsetHeight;

}

<!-- THE DIV CALLED title -->
<div
     id="title"
     class="title"
     contenteditable="true"
     style="font-family: Helvetica; font-size:18px; font-weight:bold; background-color:#fff; color:#000; -webkit-tap-highlight-color:rgba(0,0,0,0); margin:14px;"
     autocapitalization="off"
     autocorrection="off"
     autocomplete="off"
     onKeyPress="setInTitle();" <==CALL THE JS FUNCTION
></div>

函数setInTitle（）{
var titlelight=document.getElementById（'title'）。offsetHeight；
}

JS使用新字符获取CONTENTEDITABLEDIV的高度=>

现在可以呈现字符了（这只是一个模拟，当然事情不会变得像这样）

这是可以做到的吗？任何想法都将不胜感激，提前感谢
 考虑到在字符出现之前div的高度不会增加，我可以向您推荐我的解决方法。通过截取事件，您可以在另一个div中填充键入的字母，然后获取第二个div的高度，最后，您可以将字母放置在它应该出现的位置。这会增加输入时间

您可以测试脚本


#头衔{
边框：1px#3399FF实心；
最小高度：50px；
宽度：100px；
单词包装：打断单词；
}
#标题2{
过滤器：α（不透明度=20）；
不透明度：0.2；
边框：1px#3399FF实心；
最小高度：50px；
宽度：100px；
单词包装：打断单词；
}
var slowl=400//更新时间
var lastts=“”//最后时间戳值
$（“#title”）.on（'keydown keyup change keypress'，函数（e）{//捕获事件
e、 preventDefault（）；//停止事件
如果（例如timeStamp-lastts
如果您保留一个visibility:hidden DIV，以相同的固定宽度复制可见文本，该怎么办。然后您可以将一个事件附加到可见DIV的onKeyDown事件，将该字符插入隐藏DIV，获取隐藏DIV的新高度，然后在注册onKeyUp事件之前将新高度更新到可见DIV上。
如果将事件处理程序附加到
keyup
而不是
keydown
，则可以在渲染后获取高度。在渲染前，无法获取渲染后高度。你为什么要这样做

js
html
标题的高度为：…px
在这里输入

---

这就是你想要的吗？演示在

使用设置超时（0延迟）几乎可以立即检索高度：

<div
     id="title"
     class="title"
     contenteditable="true"
     autocapitalization="off"
     autocorrection="off"
     autocomplete="off"
     onkeypress="setTimeout(function() { var height = document.getElementById('title').offsetHeight; console.log(height); }, 0)"
>type here</div>

在此处键入

不过，我认为渲染后仍会执行此操作，但几乎是立即完成的。渲染前执行此操作的唯一方法是使用隐藏元素，该元素复制需要测量的元素的所有样式和内容

编辑：

我会改正的。不需要额外的元素来测量高度。您可以将按下的字符插入同一元素，测量它，然后删除该字符。棘手的部分是，您需要考虑插入符号位置和当前选择，以插入字符并在测量元素后恢复选择。还要注意的是，按一个键并不一定会附加一个字符。如果有选择，它将覆盖它，删除内容。您还需要处理剪贴板事件等

---

我在这里建议的解决方案无法处理使用鼠标编辑内容的情况（例如，从上下文菜单剪切/复制/粘贴）。我建议您研究HTML5输入事件，这可能是更好的选择。

您可以使用一个编辑器来解决这个问题

goog.Editor.SeamlessField解决了以下跨浏览器问题：

以下是将其构建在一起的说明：

或者对于懒惰的人，您可以使用我最终得到的构建：

你会像这样使用它：

// Work with a tag with id=editor
var editor = new Editor('editor');

// Make contentEditable
editor.makeEditable();

// Get the HTML contents of the tag
editor.getCleanContents();

---

对不起，也许我不明白，在字符显示在div中之前，但在按键之后，您是否在询问div的高度？基本上是的，正是您所理解的！好的@Mateus Nunes，我回答了这个问题，正如您在代码中可能注意到的，当您键入一个新字符并且这个字符应该转到一个新行时，div只是将新字符移动到一个新行，但是您的代码不能预测这些新的高度@那是…吗。。？时间？您可以降低它，间隙将始终允许您在显示字符之前获得高度

<div>Height of #title is: <span id="output">...</span>px</div>
<div
     id="title"
     class="title"
     contenteditable="true"
     autocapitalization="off"
     autocorrection="off"
     autocomplete="off"
>type here</div>

<div
     id="title"
     class="title"
     contenteditable="true"
     autocapitalization="off"
     autocorrection="off"
     autocomplete="off"
     onkeypress="setTimeout(function() { var height = document.getElementById('title').offsetHeight; console.log(height); }, 0)"
>type here</div>

// Work with a tag with id=editor
var editor = new Editor('editor');

// Make contentEditable
editor.makeEditable();

// Get the HTML contents of the tag
editor.getCleanContents();