多个 HTML 文本区域一起调整大小答案

【问题标题】：More than one HTML textareas resizing together多个 HTML 文本区域一起调整大小
【发布时间】：2015-02-07 05:51:57
【问题描述】：

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

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

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

提前致谢。

【问题讨论】：

你自己有没有尝试过？
当然，但我没有把它放在 jsfiddle 上，因为它们就像单独的垂直对齐文本区域一样工作。我认为我缺乏使用更多 css 或 javascript 的信息。

标签： javascript jquery html css blade

【解决方案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/

【讨论】：

我也查看了该帖子，但我不确定是否要尝试。我正在测试并让你知道结果。谢谢你。