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

我是jQuery / Java的新手，甚至对精巧的jQuery / Java的精练都比较新。

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

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);
  }
});

如果任何人都能够纠正我的脚本或准确确定Materialize Framework发生了什么，以便我可以不依赖于框架本身来重新创建它，我将永远感激不已。

提前致谢。

最佳答案

可能有帮助

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

Jsfiddle

关于javascript - $ ('textarea').rows展开/收缩，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33314462/