简介
auto-textarea 是一款可以自动适应高度的 textarea 插件，可以轻松地为多行输入框实现自适应高度的效果。它基于原生的 textarea 和 CSS，没有依赖任何第三方库，非常轻便、易于使用。
安装
你可以使用 npm 或者 yarn 来安装 auto-textarea：
npm i auto-textarea
或者
yarn add auto-textarea
使用
1. 在 HTML 中添加 textarea
首先，在 HTML 中添加一个 textarea 元素：
<textarea id="my-textarea"></textarea>
2. 引入 auto-textarea
然后，在 JavaScript 中引入 auto-textarea，并初始化它：
import autoTextarea from 'auto-textarea'
const myTextarea = document.getElementById('my-textarea')
autoTextarea(myTextarea)如果你在项目中使用的是 CommonJS 或者 AMD 的模块化方式，可以这样引入：
const autoTextarea = require('auto-textarea')
const myTextarea = document.getElementById('my-textarea')
autoTextarea(myTextarea)3. 自定义样式
auto-textarea 给 textarea 添加了一些样式，用来实现自适应高度的效果。你可以根据自己的需要来修改这些样式。
auto-textarea 默认添加了下面这些样式：
-- -------------------- ---- -------
------------ -
------- -----
----------- -------
-
-------------------------- -
------- ---- -----------
----------- -----
------------ ------
-------- --- -----
-4. 更多选项
auto-textarea 还提供了一些选项，可以用来自定义它的行为。你可以在初始化时传递一个选项对象，来覆盖默认的选项。下面是 auto-textarea 支持的选项：
1. maxHeight
设置 textarea 的最大高度，超过这个高度时会出现滚动条。
autoTextarea(myTextarea, {
maxHeight: 300
})2. minHeight
设置 textarea 的最小高度。
autoTextarea(myTextarea, {
minHeight: 50
})3. padding
设置 textarea 的内边距。
autoTextarea(myTextarea, {
padding: '10px'
})示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
-------------------- ----------
-------
------------ -
------- -----
----------- -------
------- -----
----------------- --------
---------- -----
------ -----
------------ ---------- ------- -----------
------ -----
----------- -----------
-------- -----
-
-------------------------- -
------- ---- -----------
----------- -----
------------ ------
-
--------
-------
------
----------------- -------
--------- ----------------------------
------- ----------------------------------------------------------------------
--------
----- ---------- - --------------------------------------
------------------------ -
---------- ----
---------- ---
-------- ------
--
---------
-------
-------使用 auto-textarea 之后，就可以轻松地实现 textarea 的自适应高度了。
结语
auto-textarea 是一个轻量、易用的 textarea 插件，可以为你的表单带来更好的用户体验。使用 auto-textarea 可以减少你的代码量，并且减少出错的可能性。推荐给前端开发者使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f0bbdce403f2923b035c108