$('textarea').rows expand/contract

Question

我刚接触jQuery/Javascript，对于压缩的jQuery/Javascript代码更是一头雾水。

我试图重新创建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框架中到底发生了什么，以便我可以在不依赖这个框架的情况下重现这个问题，我将非常感激。谢谢提前。

- DanMad

---

$(this).rows 转换为 $(this).attr('rows')，我希望这能解决问题。 - Tushar

Answer 1

可能有帮助

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

Jsfiddle

- Mohamed-Yousef

---

谢谢你的回复；这个方案基本可行，但和我贴的示例还有一些不同。 - DanMad

还要添加 textarea { overflow:hidden; } 以避免出现一秒钟的滚动条。 - Viktor Maksimov

我已经在jsfiddle中完成了这个：http://jsfiddle.net/jjz3rqpo/ 这几乎是我想要的。现在该如何使过渡动画化？看起来，CSS过渡效果没有被启用，因为我们在标记中内联设置了CSS高度值。同时，将.css()替换为.animate()会导致每次按键时textarea都会扩展，所以这也行不通。 - DanMad

@DanMad 我尝试了很多次来解决这个问题，但我真的无法得到你想要的效果...也许需要再花费很多时间...你可以使用这段代码，直到达到你需要的效果为止...祝你好运...http://jsfiddle.net/mohamedyousef1980/ewf491wg/1/ - Mohamed-Yousef

@Mohamed-Yousef 谢谢你的解决方案。我会勾选它作为我的问题答案；这是一种最小可行产品的解决方案，但它将保持我的动力 ;) - DanMad