Javascript - 如何在代码中设置高度时手动降低 Chrome 中的文本区域高度？答案

【问题标题】：Javascript - How to manually decrease textarea height in Chrome when height is set in code?Javascript - 如何在代码中设置高度时手动降低 Chrome 中的文本区域高度？
【发布时间】：2017-01-09 12:30:48
【问题描述】：

我有一个用户经常使用的文本区域。当用户使用 textarea 右下角的 resize 东西手动调整 textarea 的大小时，我将高度保存到 localStorage。我想将 textarea 的高度设置为 localStorage 中保存的高度，但是当我这样做时，textarea 的大小无法调整为小于设置的高度。

它在 Firefox 中运行良好，但在 Chrome 中却不行。

我目前正在使用 jQuery 的 .height() 设置高度。我也尝试过 .outerHeight()、.css()、.style、.setProperty()。没有任何效果。

我正在使用的代码：

    id = params.id ? params.id : $el.attr('id');
    lsHeight = localStorage.getItem('textareaOuterHeight-' + id);

    if (lsHeight != null) {
      $el.height(lsHeight);
    }

    $el.data('defaultOuterHeight', $el.outerHeight());

    $el.on('click', function() {
      if ($el.data('defaultOuterHeight') !== $el.outerHeight()) {
        localStorage.setItem('textareaOuterHeight-' + id, $el.outerHeight());
      }
    });

【问题讨论】：

你能提供一些你使用的代码吗？
@IuriiDrozdov 代码已添加。
请看jsfiddle.net/pL4shps0
我尝试了 jsfiddle，它的行为与我描述的一样。我无法将 textarea 的大小调整为小于设置的高度。
另外，我的问题是它在 Chrome 上不起作用。

标签： javascript html css google-chrome textarea

【解决方案1】：

这对我来说似乎工作正常：

$('textarea').height(20);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<textarea name="" id="" cols="50" rows="50"></textarea>

您可以尝试修改列数或行数，而不是保存+修改 textarea 的高度与高度 CSS 值：

$('textarea').attr('rows',60);

【讨论】：

我试过这个，但是通过拖动它的右下角来增加文本区域的大小似乎并没有增加行数。除非我错过了什么？
@NeedsHelp 你是对的，它改变了高度和宽度。我的建议需要弄清楚如何使高度适应要保存的行数。如果您找不到实际应用高度的方法。

【解决方案2】：

这是一个 Chrome 的 bug，仍然存在 https://bugs.chromium.org/p/chromium/issues/detail?id=94583

您可以从这里 jsfiddle.net/nz8ut/2/ 使用解决方法

你可以看看这个问题Custom CSS to allow chrome textarea resize smaller than initial state?

【讨论】：