javascript - 是否可以像 Jquery Elastic 插件一样使 div 随 textarea 一起增长？

Question

在我的评论框中，我使用了 Jquery Elastic 插件来实现文本区域的自动高度，并将这个文本区域放置在一个主要的相关 div 中，还有另一个 div 呈现评论的预览.

Textarea 和 preview 有自己的 Z-index 来显示一个在一个上面。

现在，如果我在 textarea 上写一些东西并按回车键换行，它会在下方增长，但我希望我的主 div 也随着 textarea 增长而不会溢出。

是否可以让div随着textarea一起增长。

这是我的工作示例:

var smileys = {
':)': '<img src="http://labs.google.com/ridefinder/images/mm_20_red.png" border="0" alt="" />',
':-)': '<img src="http://labs.google.com/ridefinder/images/mm_20_green.png" border="0" alt="" />',
':D': '<img src="http://labs.google.com/ridefinder/images/mm_20_red.png" border="0" alt="" />',
};

$(document).ready(function() {
  $(".chat > textarea").bind("keyup", function(e) {
    $(".chat > div").html(smilyMe($(".chat > textarea").val()));
  });
  $('textarea').elastic();
});

function smilyMe(msg) {
    msg = msg.replace(/(?:\r\n|\r|\n)/g, '<br />');
    for (var key in smileys) {
        msg = msg.replace(key, smileys[key]);
    }
    return msg;
}

#main {
position:relative;
	border: 2px solid #ccc;
	min-height: 50px;
	width: 450px;
}
.chat {
  width: 100%;
}
.preview {
  width: 100%;
  font-family:Times New Roman, Times, serif;
	font-size:14px;
  color:#000000;
  position:absolute;
  top:0; left:0; z-index:997;
}
.chat > textarea {
    font-family:Times New Roman, Times, serif;
	font-size:14px;
    border:0px none;
	min-height: 50px;
  width: 100%;
  position:absolute; color:transparent;
  top:0; left:0; z-index:998; background: transparent;
}

<div id="main">
	<div class="chat">
      <div class="preview">
      </div>
          <textarea name="comment" rows="2" tabindex="4" id="comment" placeholder="Problem occurs here after 6th line. . ."></textarea>
	</div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://jquery-elastic.googlecode.com/svn-history/r30/trunk/jquery.elastic.source.js"></script>

Answer 1

通过 jquery 动态调整主 div css 高度:

$('#main').on('keyup',function() {
  $(this).css('height','auto');
  $(this).css('height',Math.max(this.scrollHeight)+'px');
});