jquery实现textarea 高度自适应

自适应高度的jQuery Textarea，流畅动画效果，适合新手学习

今天为大家分享一段非常实用且易于理解的jQuery代码，这段代码用于实现textarea的高度自适应功能，带有流畅的动画效果。对于正在学习jQuery的小伙伴们来说，这是一个非常好的实践项目。

在此之前，我们曾过使用Javascript来控制textarea的高度随内容变化而自适应增长或收缩。今天，我们带来了一个全新的实现方法，代码简洁明了。

以下是具体的实现代码：

我们通过jQuery的扩展方法定义了一个autoHeight函数，这个函数可以让textarea实现高度自适应。在函数内部，我们首先获取textarea的初始高度，并在textarea的内容发生变化时，重新调整其高度。

代码如下：

```javascript

jQuery.fn.extend({

autoHeight: function() {

return this.each(function() {

var $this = jQuery(this);

if(!$this.attr('_initAdjustHeight')) { // 如果未设置初始高度属性

$this.attr('_initAdjustHeight', $this.outerHeight()); // 设置初始高度

}

_adjustH(this).on('input', function() { // 绑定input事件，实时调整高度

_adjustH(this);

});

});

// 重置textarea高度的辅助函数

function _adjustH(elem) {

var $obj = jQuery(elem);

return $obj.css({ // 先设置高度和溢出属性

height: $obj.attr('_initAdjustHeight'),

'overflow-y': 'hidden'

}).height(elem.scrollHeight); // 再根据内容高度调整textarea的实际高度

}

}

});

```

如何使用呢？在文档加载完毕后，只需选择页面上的textarea元素，并调用autoHeight函数即可。代码如下：

```javascript

$(function(){

$('textarea').autoHeight();

});

```

以上就是本文的全部内容，希望这段代码能帮助大家在学习jQuery的过程中更加得心应手。如果你有任何疑问或建议，欢迎随时与我们交流。祝大家学习愉快！