Javascript到jquery多个文本区域大小[关闭]

Question

我找到了解决我在这里遇到的问题http://jsfiddle.net/2UDdh/43/light 但我正在尝试将它调整为 jquery 因为我想稍后使用 .each() 和 "this" 因为我有多个来自 db 的 textarea不同的id。

    var textContainer, textareaSize, input;
var autoSize = function() {
  textareaSize.innerHTML = input.value + '\n';
};

document.addEventListener('DOMContentLoaded', function() {
  textContainer = document.querySelector('.textarea-container');
  textareaSize = textContainer.querySelector('.textarea-size');
  input = textContainer.querySelector('textarea');

  autoSize();
  input.addEventListener('input', autoSize);
});

Answer 1

如果你真的想使用 jQuery，你可以创建一个 jQuery 插件。

您实际上是在向不可见的<div> 添加换行符，以控制包装后的<textarea> 的大小。

/* jquery.textarea-resizer.js */
(function($) {
  var autoSize = function(input, textareaSize) {
    $(textareaSize).html($(input).val() + '\n');
  };
  var initResizer = function(target) {
    if (!$(target).data('resizer-active')) {
      var textareaSize = $(target).find('.textarea-size');
      var input = $(target).find('textarea');
      autoSize(input, textareaSize);
      $(input).on('input', function(e) {
        autoSize(e.target, textareaSize);
      });
      $(target).data('resizer-active', true); // Initialize only once
    }
  }
  $.fn.textareaResizer = function() {
    this.each(function() {
      initResizer(this);
    });
  }
})(jQuery);

$('.textarea-container').textareaResizer(); // Initialize all 3 at once!

.textarea-container {
  position: relative;
  width: 50%;
}

.textarea-container textarea,
.textarea-container .textarea-size {
  min-height: 25px;
  font-family: sans-serif;
  font-size: 14px;
  box-sizing: border-box;
  padding: 4px;
  border: 1px solid;
  overflow: hidden;
  width: 100%;
}

.textarea-container textarea {
  height: 100%;
  position: absolute;
  resize: none;
  white-space: normal;
}

.textarea-container .textarea-size {
  visibility: hidden;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="textarea-container">
  <textarea></textarea>
  <div class="textarea-size"></div>
</div>

<div class="textarea-container">
  <textarea></textarea>
  <div class="textarea-size"></div>
</div>

<div class="textarea-container">
  <textarea></textarea>
  <div class="textarea-size"></div>
</div>

Answer 2

您可能正在寻找这个。但我可能建议您自己尝试以更好地理解。

var textContainer, textareaSize, input;

var autoSize = function () {
  textareaSize.html(input.val() + '\n') ;
};
$(document).ready(function(){
    textContainer = $('.textarea-container');
  textareaSize = $('.textarea-size');
  input = $('textarea');
  autoSize();
  input.on('input',autoSize);

})

.textarea-container {
  position: relative;
  width: 50%;
}

textarea, .textarea-size {
  min-height: 25px;
  font-family: sans-serif;
  font-size: 14px;
  box-sizing: border-box;
  padding: 4px;
  border: 1px solid;
  overflow: hidden;
  width: 100%;
}

textarea {
  height: 100%;
  position: absolute;
  resize:none;
  white-space: normal;
}

.textarea-size {
  visibility: hidden;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="textarea-container">
  <textarea></textarea>
  <div class="textarea-size"></div>
</div>