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

More than one HTML textareas resizing together

本文关键字：调整 一起 区域 HTML 文本 多个      更新时间：2023-09-26

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

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

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

提前谢谢。

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

您可以查看有关较旧问题的以下答案：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/

相关文章：