textarea滚动条怎么用

Answer 1

怎么让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';
}
// 我们使用" image_type="1" mime_type="image/jpeg" web_uri="pgc-image/d9e58a91563e44b08cb1da67b3d25cb8" style="height: auto;"/