Question

在视图中：

<%= f.text_area :content, rows: 2, class: "notice_area" %>

我有以下javascript，可以将文本区域的高度调整为行数：

<script type="text/javascript">
  function h(e) {
    $(e).css({'height':'auto','overflow-y':'hidden'}).height(e.scrollHeight);
  }
  $('.notice_area').each(function () {
    h(this);
  }).on('input', function () {
    h(this);
  });
</script>

css：

.notice_area {
  display: inline-block;
  width: 100%;
  min-height: 46px;
  padding-top: 3px;
  padding-bottom: 0px;
  border-radius: 7px;
  border: 1px solid red;
}

问题是当你开始在文本区域输入时，高度突然从默认的46px增加到padding-top的值，在这种情况下为3px。这是一件小事，但令人难以置信的烦人。当padding-top设置为0px时，它很好。当你开始输入时，我不明白为什么高度不会保持在46px。为什么会这样？我已经尽力阻止它，但没有运气。

Answer 1

不幸的是，我无法在实验室环境中复制整个行为。您可能想看一眼：http://jsfiddle.net/L9b9tdbu/1/。

但在我看来，问题在于scrollHeight包含填充这一事实。所以你得到它并将它分配到高度，基本上再次填充填充，这使文本区域增长3个像素。

如果我是你，我会尝试将代码更改为：

function h(e) {
  $(e).css({'height':'auto','overflow-y':'hidden'}).height(e.scrollHeight-3);
}
$('.notice_area').each(function () {
  h(this);
}).on('input', function () {
  h(this);
});

即。在设置高度之前减去所有应用的填充。

希望它有所帮助！

输入开始时Rails突然文本区域高度增加

1 个答案: