一个听话的textarea标签（标签打印机打印中间隔一个空白的）

题记

------世界上最难的不是怎么解决问题，而是你真正发现这个问题的存在。

小编今天无意间看到一句关于仓央嘉措的诗句“没有了有，有了没有；没有了有了没有；有了没有了有。”不知道大家怎么对这段话断句，反正小编是蒙圈了。其实无论生活还是工作，突然的事件总会有发生，而且突然的让我们猝不及防。我们唯一能做的就是爬起来，去解决问题（当然你也可能会躺着不起来）。哈哈哈，其实小编也不知道自己到底在说什么，还是听小编分享一个项目中遇到的问题&解决方法吧。

怎么让textarea随着文字高度自动改变

有一次项目开发中遇到这样一个需求，在不确定文本内容的多少情况下，怎么做到元素能随文本大小实时显示。当然说到文本，首先想到的是input标签和textarea标签。但是，这两个标签好像都不能实现项目需求，但相对之下，后者通过js改造还是有很大希望实现的。

心动不如行动，然后就分析起来：

通过js来实时控制textarea的高度。

（1）首先创建一个函数，计算因边框和轮廓产生的高度差异

（2）设置高度为0以防需要收缩（高度）

（3）设置正确的高度 scrollHeight 是文本内容的全部高度，而不仅仅是可见部分的

（4）如果文本域有边距，我们需要设置box-sizing: border-box

（5）我们不需要滚动条

（6）当窗口大小改变时，我们需要重新调整高度（例如方向变化）

（7）高度初始化

ok，思路有了，那就一点一点把代码码出来

function textareaHeight(textareaElement, minHeight) {

// 计算因边框和轮廓产生的高度差异

var outerHeight = parseInt(window.getComputedStyle(textareaElement).height, 10);

var diff = outerHeight - textareaElement.clientHeight;

// 设置高度为0以防需要收缩（高度）

textareaElement.style.height = 0;

// 设置正确的高度

textareaElement.style.height = Math.max(minHeight, textareaElement.scrollHeight + diff) + 'px';

}

// 我们使用"data-adaptheight"属性作为一个标记

var textAreas = document.querySelectorAll('textarea[data-adaptheight]');

for (var i = 0, l = textAreas.length; i < l; i++) {

var el = textAreas[i];

// 如果文本域有边距，我们需要设置box-sizing: border-box

el.style.boxSizing = el.style.mozBoxSizing = 'border-box';

// 我们不需要滚动条，不是么？

el.style.overflowY = 'hidden';

// 通过"rows"属性初始化的最小高度

var minHeight = el.scrollHeight;

el.addEventListener('input', function() {

textareaHeight(this, minHeight);

});

// 当窗口大小改变时，我们需要重新调整高度（例如方向变化）

window.addEventListener('resize', function() {

textareaHeight(this, minHeight);

});

// 我们调整初始内容的高度

textareaHeight(el, minHeight);

}

你的支持和鼓励，是我最大的动力。如果感觉是干货，欢迎收藏和分享。