如何使用Javascript或Jquery检查div何时调整大小

Question

所以我在线框图中有一个网络应用程序，但是我遇到了一个需要技术解决方案才能巩固这个模型的问题。那是：

• 图。 ＃1 用户创建新的“文字字段” element（具有最大宽度的div。） 用户然后开始输入说 元素直到......

• 图。 ＃2 元素到达它 最大宽度，文本下降到一个新行和一个'新'背景图像（在 创建另一个div的形式（使用它的不透明度和位置动画效果）以适应更大的元素sze。

这是预期功能的大致轮廓（目前给出，我不知道如何使文本字段的行为类似于具有最大宽度的div）但 I'我很好奇如何为第二步创建事件处理程序 ;我考虑过检查每个'keydown'事件，但这似乎效率低下......

有没有人有任何建议或想法来解决这样的问题？谢谢！

Answer 1

'keydown'或'keyup'事件是首先想到的事情。如果您决定这样做，您将不得不这样做 每次检查html元素的大小，并将其与旧的（保存在变量中）进行比较。

最简单的方法似乎是将处理程序绑定到html元素，并在大小更改时触发它。 我不知道这样的事件是否存在，但是如果那样的话就是这样。

（您的描述性问题为+ 1）

Answer 2

您可以尝试使用CSS3过渡功能：
http://slides.html5rocks.com/#slide42
这样，您想要的元素可以通过浏览器本身进行动画处理。

免责声明：显然，这不适用于更复杂的效果。

Answer 3

在MSIE中，应该触发onresize。

Answer 4

不确定如何攻击宽度问题，其中输入字段自动调整大小直到最大宽度然后换行。您可以在文本字段中使用等宽字体，以便您可以使用javascript水平监视和控制框的增长，直到最大宽度。

要接近高度自动增长你最好使用textarea将它设置为一行开始，这样它看起来像一个输入框然后当文本自动换行到下一行时，它会做，你可以检查textarea的scollHeight并检查textarea的实际高度，减去它们，然后得到增长textarea以停止出现垂直滚动条所需的高度。

上面的内容将使滚动条短暂地轻弹，同时你的javascript会变得神奇。您可以使用overflow:auto;隐藏滚动条，但我不知道scrollHeight是否仍然可以正确读取。你需要进行实验。

另请注意我上面关于在keydown上设置间隔并检查输入长度以停止重复按键文本问题的评论。