$('textarea').行数expand/contract

Question

我是 jQuery/Javascript 的新手，甚至是在缩小 jQuery/Javascript 上搜索的新手。

我正在尝试重新创建我在 Materialise Framework 的表单组件中找到的一些功能。如果您访问以下 link:

您将看到他们的示例 <textarea> 元素 expands/contracts，具体取决于元素中的行数。（无论如何，这是我对它是如何工作的假设；由于我对 jQuery 的了解不足，我不确定它是如何完成的。我在缩小的脚本中找不到我要找的东西）。

我不相信它是用纯 css 完成的，所以这就是为什么我一直在浏览 .js 的原因。

我试图用我有限的知识重新创建功能，但我的代码还有很多不足之处。

$('textarea').keyup(function() {
  if($(this).rows == +1) {
    console.log('+1 row');
    $(this).animate({'height': '+=16'}, 250);
  } else if (this.rows == -1) {
    console.log('-1 row');
    $(this).animate({'height': '-=16'}, 250);
  }
});

如果有人能够更正我的脚本或确切地确定 Materialise 框架发生了什么，以便我可以在不依赖框架本身的情况下重新创建它，我将永远感激不已。

提前致谢。

Answer 1

可能会有帮助

$('textarea').keyup(function() {
      $(this).css({'height': 'auto'});
      $(this).height( this.scrollHeight );
});

Jsfiddle

$('textarea').行数expand/contract

$('textarea').rows expand/contract

javascript

css

jquery

textarea

rows