javascript - 调整文本区域的事件大小？

Question

当前版本的 Firefox 和 Chrome 包含一个拖动处理程序来调整 <textarea> 的大小盒子。我需要捕获调整大小事件，我认为使用 jQuery 的 resize() 会很容易事件，但它不起作用!

我也试过正常的onResize事件，但结果是一样的。 You can try it on JSFiddle .

有没有办法捕获它？

Answer 1

处理元素大小调整的标准方法是 Resize Observer api，适用于所有现代网络浏览器版本。

function outputsize() {
 width.value = textbox.offsetWidth
 height.value = textbox.offsetHeight
}
outputsize()

new ResizeObserver(outputsize).observe(textbox)

Width: <output id="width">0</output><br>
Height: <output id="height">0</output><br>
<textarea id="textbox">Resize me.</textarea>

如果您需要处理旧版本的 Chrome 和 Firefox(其他未测试)，可以使用 Mutation Observer 来检测样式属性的变化。

function outputsize() {
 width.value = textbox.offsetWidth
 height.value = textbox.offsetHeight
}
outputsize()

new MutationObserver(outputsize).observe(textbox, {
 attributes: true, attributeFilter: [ "style" ]
})

Width: <output id="width">0</output><br>
Height: <output id="height">0</output><br>
<textarea id="textbox">Resize me.</textarea>

调整观察者的大小

文档:https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API

规范:https://wicg.github.io/ResizeObserver

当前支持:http://caniuse.com/#feat=resizeobserver

填充代码:https://github.com/pelotoncycle/resize-observer https://github.com/que-etc/resize-observer-polyfill https://github.com/juggle/resize-observer