不止一个HTML textareas一起调整大小

时间:2014-12-09 10:57:49

标签: javascript jquery html css blade

我有三个textareas。如果其中任何一个正在调整大小,我希望其他人调整大小,就像调整大小一样。

1.注意我正在垂直调整大小。
这是一种内联形式。

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

提前致谢。

1 个答案:

答案 0 :(得分:1)

似乎没有调整textarea大小的事件。

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

你可以修改它来更新其他textareas: 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/