textarea高度自适应，可删减高度

前言

一个聊天界面，最开始用的input输入框，业务测试发现不能换行，想要有微信输入框的自动换行和高度自适应。业务是老大，苦逼的开发只能马上改。搜索input属性，额，竟然不能自动换行。那就taxtarea标签，但textarea标签不能高度自适应。

输入框自动换行和高度自适应功能，搜遍了百度，提供的解决方法有：

• div模拟textarea，css控制样式
  
  
  存在问题：输入时光标会错位
• textarea标签，自带换行
  存在问题：无法自适应高度，输入文字点击发送后，换行未显示
• 复制textarea内容给一个隐藏的div标签，动态设置textarea的高度等于该div标签的高度
  存在问题：尽管设置同样宽度，但textarea和div一行显示的文字个数不一样，其次，该方式从本身来说不是很建议

最终效果：

看看最简单的实现方法

网上搜了很多textarea高度自适应的实现方法，总的有以下几种：

• 添加一个util.js，动态设置高度自适应（复制粘贴到自己项目中，报错，这个js的具体内容没太看懂，最后放弃）
• 获取scrollHeight，动态设置textarea的高度（该方法可以，但删减文字，高度不减小）

最后参考了某个博主的博客（公司电脑的浏览器记录被清空了，找了好久也没找到这篇博客链接。。），终于完整实现了想要的效果，太难了我。

// 这里必须加上rows属性，否则，输入第一个字后高度就会被撑开一些
<textarea class="textarea" rows="1" placeholder="有问题，随便问" @input="handleInput"></textarea>

// 最关键的部分，监听scrollHeight,设置输入框高度
handleInput (e) {
	console.log(e.target.scrollHeight);
  	e.target.style.height = 'auto'
  	e.target.style.height = `${e.target.scrollHeight}px`
},

.textarea {
  margin-left: auto;
  width: 4rem;
  height: 0.6rem;
  max-height: 1.2rem;
  line-height: 0.4rem;
  border: 1px solid #eee;
}

textarea按回车不换行问题

问题： 在textarea中按回车，点击发送后，内容不显示换行
解决方法： 给显示内容的标签添加样式

white-space: pre-line; //合并空白符序列，但是保留换行符

textarea自带padding问题

textarea本身就设置了padding：2px,这个地方有很多坑，会使得标签的scrollHeight多出一些

• 第一个坑：每输一个字高度就增加，解决方法： 设置padding：0
• 第二个坑：输入第1个字时，高度就被撑开，解决方法：添加rows="1"属性

看到一篇介绍scrollHeight还挺详细的文章：textarea在react中实现高度自适应