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

Question

在 View 中:

<%= 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;
}

问题是，当您开始在文本区域中输入时，无论 padding-top 的值是多少，高度都会突然从默认的 46px 增加，在本例中为 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);
});

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

希望对您有所帮助!