javascript - 多个 HTML 文本区域一起调整大小

Question

我有三个文本区域。如果其中任何一个正在调整大小，我希望其他人像调整大小一样调整大小。

1.请注意，我只是垂直调整大小。
2.这是一个内联表单。

<div class="col-sm-12 form-group form-inline">
   {{ Form::textarea('textarea1') }}
   {{ Form::textarea('textarea2') }}
   {{ Form::textarea('textarea3') }}
</div>

提前致谢。

Answer 1

似乎没有调整文本区域大小的事件。

您可以查看以下关于旧问题的答案: https://stackoverflow.com/a/7055239/1537154

您可以修改它以更新所有其他文本区域: http://jsfiddle.net/tsx1yxj3/

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  
      $('textarea').height($this.outerHeight());
      $('textarea').width($this.outerWidth());
  }

  // store new height/width
  $this.data('x', $this.outerWidth());
  $this.data('y', $this.outerHeight()); 
 });

});

调整大小只会在您完成后开始，并且还有一些其他限制。

您还可以查看 jquery UI 实现: http://jqueryui.com/resizable/