调整textarea事件的大小？

Question

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

我也尝试了正常onResize事件,但结果是一样的.你可以在JSFiddle上试试.

有没有办法捕获它？

Answer 1

这是一个老问题,但其他人在IRC中有相同的问题,所以我决定在这里解决它:http://jsfiddle.net/vol7ron/Z7HDn/

Chrome无法捕获调整大小事件,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>

注意:

1. 您可以像侯赛因那样附上您自己的可调整大小,但如果您想要原始的,可以使用上面的代码

2. 正如布莱恩·唐宁提到的那样,当鼠标放在文本区域顶部时,鼠标按钮会起作用; 但是,有些情况可能不会发生,例如当浏览器未最大化并且您继续拖动超出浏览器范围或用于resize:vertical锁定移动时.

   对于更高级的东西,你需要添加其他监听器,可能是队列和间隔扫描器; 或者使用mousemove,因为我相信jQuery可调整大小 - 然后问题变成你对表现与抛光的价值有多大？

更新:从那以后,浏览器的用户界面发生了变化.现在双击该角可能会将文本框缩小为其默认大小.因此,您也可能需要在此事件之前/之后捕获更改.

Answer 2

一个新的标准是Resize Observer api,在Chrome Dev 54中提供了实验性网络平台功能标志.

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>

或者,Mutation Observer可用于检测Firefox和Chrome 54中样式属性的更改.

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://wicg.github.io/ResizeObserver

Polyfill:https://github.com/pelotoncycle/resize-observer

Chrome问题:https://crbug.com/612962

Chrome标记:chrome:// flags/#enable-experimental-web-platform-features

Firefox问题:https://bugzil.la/1272409

Safari问题:http://wkb.ug/157743

Answer 3

我把vol7ron的回答稍微混了一下,然后用一个简单的普通"resize"事件触发器替换了"Resize Action Here",这样你就可以像往常一样将你想要发生的事情附加到resize事件上:

$(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事件,因此调整大小时也会在调整大小时拖动鼠标时触发,但请记住,当您移动鼠标时它会经常触发.

在这种情况下,您可能希望在实际触发或处理调整大小事件时稍微延迟,例如替换上面的内容:

$(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'));
});

Answer 4

另一种方法是通过绑定到textarea上的mouseup事件.然后你可以检查尺寸是否改变了.

Answer 5

在发出调整大小事件之前，您需要首先调整文本区域的大小。您可以使用 jQuery UI resizing()来做到这一点，并在其中调用 resize 事件。

$("textarea").resizable({
    resize: function() {
        $("body").append("<pre>resized!</pre>");
    }
});

检查工作示例http://jsfiddle.net/HhSYG/1/