$(“textarea”).rows展开/合同

Question

对于jQuery/Javascript来说，我是新手，在缩小的jQuery/Javascript上，我甚至更新。

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

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

如果有人能够更正我的脚本或准确地识别物化框架正在发生的事情，以便我可以在不依赖于框架本身的情况下重新创建这个框架，我将永远感激。

提前谢谢。

Answer 1

可能会有帮助

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

Jsfiddle