现在很多网站都支持输入框自动增长的功能，用户在输入时输入框的高度也会随着内容增加而增加，这样可以使用户输入体验更加友好。如果你想在你的网站中也加入这一功能，那么你可以使用 input-autogrow 这个 npm 包来轻松实现。
安装
你可以在终端中使用 npm 命令来安装 input-autogrow：
npm install input-autogrow --save
这个命令会在你的项目中安装 input-autogrow。
使用
使用 input-autogrow 很简单，只需要在你的代码中导入它即可。你可以使用 CommonJS 或者 ES6 的 import 语法导入它：
// CommonJS var inputAutogrow = require('input-autogrow'); // ES6 import inputAutogrow from 'input-autogrow';
导入后，你需要给需要自动增长的输入框添加一个类名，例如：
<input type="text" class="autogrow">
然后在你的 JavaScript 代码中，把类名传入到 input-autogrow 中：
// 获取所有需要自动增长的输入框 var inputs = document.querySelectorAll('.autogrow'); // 给每个输入框添加自动增长的功能 inputAutogrow(inputs);
这样，你就完成了输入框自动增长功能的添加。
配置
你可以通过传递一个配置对象来对 input-autogrow 进行配置。配置对象的属性如下：
- scrollParent: 自定义滚动父级。默认值是 null。
- minHeight: 最小高度。默认值是 0。
- lineHeight: 行高。默认值是
getComputedStyle(el).lineHeight。 - paddingTop: 上内边距。默认值是
getComputedStyle(el).paddingTop。 - paddingBottom: 下内边距。默认值是
getComputedStyle(el).paddingBottom。
下面是一个使用配置的示例：
inputAutogrow(inputs, { scrollParent: document.body, lineHeight: 20, paddingTop: 10, paddingBottom: 10 });
结语
通过这篇文章，你已经学会了如何使用 input-autogrow 来实现输入框自动增长的功能。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65366
