javascript - 将 div 放置在文本区域 jquery 中的文本下方

Question

我需要将 div 放置在文本区域中文本的下方。因此，如果我在这里输入，div 应该位于下面的行中，依此类推...

有什么想法如何让这个文本位置将 div 放置在其下方吗？

我所做的只是获取 div 位置，而不是文本。

var offset = $('#comment').offset();

var x_pos = offset.left;
var y_pos = offset.top;

  $("#display").css({
        top: x_pos,
        left: y_pos
  });

html:

<textarea id=comment>how to position #display always below this text? (even if I press enter)</textarea>

<div id=display></div>

https://jsfiddle.net/krxz4ogg/

Answer 1

如果您希望在文本区域文本下方显示的 div 具有固定高度，则可以这样做。

JS 可扩展 texarea 取自 @SpYk3HH's answer .

我的 fiddle :https://jsfiddle.net/u2q3gw7x/

$("#MyExpandingTextArea").keyup(function(e) {
  //  this if statement checks to see if backspace or delete was pressed, if so, it resets the height of the box so it can be resized properly
  if (e.which == 8 || e.which == 46) {
    $(this).height(parseFloat($(this).css("min-height")) != 0 ? parseFloat($(this).css("min-height")) : parseFloat($(this).css("font-size")));
  }
  //  the following will help the text expand as typing takes place
  while ($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
    $(this).height($(this).height() + 1);
  };
});

#MyExpandingTextArea {
  padding-bottom: 6em;
  font-size: 1em;
  line-height: 1em;
}
#MovingDiv {
    border: 1px solid black;
    height: 3em;
    width: 3em;
    margin-top: -4em;
    margin-left: 10px;
    position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<textarea name="myTextArea" id="MyExpandingTextArea"></textarea>
<div id="MovingDiv">
  &nbsp;
</div>

如果不希望整个textarea展开的效果，可以考虑将textarea包裹在一个固定高度的div中，并overflow:hidden;