jquery 插件实现多行文本框[textarea]自动高度

文章标题：jQuery插件实现多行文本框textarea自适应高度功能

你是否遇到过在使用textarea时，需要手动调整其高度以适应内容的困扰？今天，我将为你介绍一个基于jQuery的插件，它能实现textarea自动调整高度功能，让你的表单体验更加流畅。

功能介绍：

1. 当用户在textarea内换行时，自动增加一行高度。

2. 当删除一行内容时，自动减少一行的高度。

由于工作中经常需要使用此类功能，而使用其他插件需要导入大量文件，因此我特意编写了这个简单的jQuery插件。

HTML结构示例：

```html

```

插件实现代码：

```javascript

jQuery.extend({

textareaAutosize_dc: function() {

$("textarea").on("keyup", function(e) {

var currentEnterCount = $(this).val().split("").length; //获取当前换行数量

var lineHeight = Number($(this).css("line-height").replace("px", "")); //获取行高

var enterCount = $(this).attr("enterCount"); //获取已记录的行数

if (currentEnterCount < enterCount && enterCount != undefined) {

//每行减掉固定行高

$(this).height($(this).height() - lineHeight);

} else if (currentEnterCount > enterCount) {

//每行加入固定行高并更新已记录的行数

$(this).height($(this).height() + lineHeight);

$(this).attr("enterCount", currentEnterCount);

}

//记录当前行数以便下次使用

$(this).attr("enterCount", currentEnterCount);

});

}

});

//调用自动高度插件函数

$.textareaAutosize_dc();

```

这个插件非常简单易用，只需调用`$.textareaAutosize_dc()`函数即可应用于所有的textarea元素。当用户在textarea中输入内容时，插件会自动调整其高度以适应内容。插件还记录了每个textarea的当前行数，以便在下次使用时能够保持之前的状态。这样，用户在切换页面或重新加载页面后，textarea的高度将保持上次使用的状态。希望这个插件能给你的工作带来便利，提升用户体验。