调整textarea事件？
Firefox和Chrome的当前版本包含一个拖放处理程序来调整<textarea>框的大小。 我需要捕捉resize的事件，我认为用jQuery的resize()事件很容易，但它不工作！
我也尝试了正常的onResize事件，但结果是一样的。 你可以在JSFiddle上试试 。
有没有办法来捕捉它？
您需要在发出resize事件之前先调整textarea的大小。 你可以通过使用jQuery UI resizable（）来做到这一点，在里面你可以调用resize事件。
$("textarea").resizable({ resize: function() { $("body").append("<pre>resized!</pre>"); } });
在http://jsfiddle.net/HhSYG/1/查看工作示例;
这是一个老问题，但是其他人在IRC中也是一样的，所以我决定在这里解决它： http : //jsfiddle.net/vol7ron/Z7HDn/
Chrome浏览器不捕获resize事件，并且Chrome不捕获mousedown，因此您需要设置init状态，然后通过mouseup处理更改：
jQuery(document).ready(function(){ var $textareas = jQuery('textarea'); // store init (default) state $textareas.data('x', $textareas.outerWidth()); $textareas.data('y', $textareas.outerHeight()); $textareas.mouseup(function(){ var $this = jQuery(this); if ( $this.outerWidth() != $this.data('x') || $this.outerHeight() != $this.data('y') ) { // Resize Action Here alert( $this.outerWidth() + ' - ' + $this.data('x') + '\n' + $this.outerHeight() + ' - ' + $this.data('y') ); } // store new height/width $this.data('x', $this.outerWidth()); $this.data('y', $this.outerHeight()); }); });
HTML
<textarea></textarea> <textarea></textarea>
注意：
- 你可以附上你自己的可调大小，因为侯赛因已经做了，但如果你想要原来的，你可以使用上面的代码
-
正如Bryan Downing所提到的，当鼠标位于textarea的顶部时，mouseup会起作用。 然而，有些情况下可能不会像浏览器未最大化时那样发生，并且您继续拖动超出浏览器的范围，或使用
resize:vertical来locking移动。对于更高级的东西，您需要添加其他侦听器，可能是队列和间隔扫描器; 或者使用mousemove，因为我相信jQuery可以resize – 那么问题就变成了你对性能和波兰的重视程度了吗？
更新：此后，浏览器的用户界面发生了变化。 现在双击angular落可能会将文本框缩小到其默认大小。 所以你也可能需要捕捉这个事件之前/之后的变化。
另一种方法是通过绑定到textarea上的mouseup事件。 那么你可以检查大小是否改变。
我把vol7ron的答案混合了一下，然后用一个普通的“resize”事件的简单触发器replace了“Resize Action Here”，这样就可以像往常一样附加你想要发生的任何事情：
$(document).ready(function(){ $('textarea').bind('mouseup mousemove',function(){ if(this.oldwidth === null){this.oldwidth = this.style.width;} if(this.oldheight === null){this.oldheight = this.style.height;} if(this.style.width != this.oldwidth || this.style.height != this.oldheight){ $(this).resize(); this.oldwidth = this.style.width; this.oldheight = this.style.height; } }); });
我添加了mousemove事件，因此在resize的同时拖动鼠标时也会触发resize，但请记住，当您移动鼠标时，它会经常触发。
在这种情况下，您可能希望在实际触发或处理resize事件时稍微延迟一点，例如replace上述内容：
$(this).resize();
有：
if(this.resize_timeout){clearTimeout(this.resize_timeout);} this.resize_timeout = setTimeout(function(){$(this).resize();},100);
示例用法，使第二个textarea与第一个一起成长和缩小：
$('textarea').eq(0).resize(function(){ var $ta2 = $('textarea').eq(1); $('textarea').eq(1).css('width',$ta2.css('width')).css('height',$ta2.css('height')); });
一个新的标准是Resize Observer API，在Chrome Dev 54中提供了实验性networking平台function标志。
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>
resize事件不存在textarea。
可resize的jQueryPlugin看起来不是本地的，所以我们必须使用替代方法。
一种模拟它的方法是使用mousedown / click事件。 如果你想要实时的事件触发，你可以这样做：
2013年11月11日更新：
// This fiddle shows how to simulate a resize event on a // textarea // Tested with Firefox 16-25 Linux / Windows // Chrome 24-30 Linux / Windows var textareaResize = function(source, dest) { var resizeInt = null; // the handler function var resizeEvent = function() { dest.outerWidth( source.outerWidth() ); dest.outerHeight(source.outerHeight()); }; // This provides a "real-time" (actually 15 fps) // event, while resizing. // Unfortunately, mousedown is not fired on Chrome when // clicking on the resize area, so the real-time effect // does not work under Chrome. source.on("mousedown", function(e) { resizeInt = setInterval(resizeEvent, 1000/15); }); // The mouseup event stops the interval, // then call the resize event one last time. // We listen for the whole window because in some cases, // the mouse pointer may be on the outside of the textarea. $(window).on("mouseup", function(e) { if (resizeInt !== null) { clearInterval(resizeInt); } resizeEvent(); }); }; textareaResize($("#input"), $("#output"));
演示： http : //jsfiddle.net/gbouthenot/D2bZd/
FireFox现在支持textareas上的MutationObserver事件，这似乎工作得很好。 铬悲伤地仍然需要一个解决方法。
基于这个页面上的其他答案，这是一个重构和更新的版本，当textarea被resize时触发一个窗口大小调整事件。
我还为鼠标添加了一个事件侦听器，使其离开iFrame所需的窗口，以检测textarea何时变得比框架大。
(function(textAreaChanged){ function store(){ this.x = this.offsetWidth; this.y = this.offsetHeight; } function textAreaEvent(){ if (this.offsetWidth !== this.x || this.offsetHeight !== this.y) { textAreaChanged(); store.call(this); } } $('textarea').each(store).on('mouseup mouseout',textAreaEvent); $(window).on('mouseup',textAreaEvent); })(function(){ $(window).trigger('resize'); });
在IE9和以上，我们可以做同样的没有jQuery。
(function(textAreaChanged){ function store(){ this.x = this.offsetWidth; this.y = this.offsetHeight; } function textAreaEvent(){ if (this.offsetWidth !== this.x || this.offsetHeight !== this.y) { textAreaChanged(); store.call(this); } } Array.prototype.forEach.call( document.querySelectorAll('textarea'), function (el){ el.addEventListener('mouseup', textAreaEvent); el.addEventListener('mouseout', textAreaEvent); } ); window.addEventListener('mouseup',textAreaEvent) })(function(){ //trigger window resize var event = document.createEvent('Events'); event.initEvent('resize', true, false); window.dispatchEvent(event); });
感谢MoonLite – 你的脚本工作正常，但有时，如果你做一个快速增加resize的鼠标指针是在mouseup textarea之外，希望的function不会触发。 所以我在包含的元素上添加了一个mouseup事件，使其工作可靠。
。
$('textarea_container').bind('mouseup', function() { YourCode ; } ) ;
“
