Question

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

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

您将看到他们的示例<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 Framework正在发生什么，以便我可以重新创建它而不依赖于框架本身，我会永远感激。

提前致谢。

Answer 1

可能有帮助

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

Jsfiddle

$（'textarea'）。行扩展/收缩

1 个答案: