javascript - $ ('textarea' ).rows 扩展/收缩

Question

我是 jQuery/Javascript 的新手，甚至是通过缩小的 jQuery/Javascript 进行搜索的新手。

我正在尝试重新创建我在 Materialize 框架的表单组件中找到的一些功能。如果您访问以下链接:

http://materializecss.com/forms.html

你会看到他们的例子 <textarea>元素根据元素中的行数扩展/收缩。 (这是我对它如何工作的假设；由于我缺乏 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