无需js 超级简单 一行代码 实现 输入框高度自适应 / 输入框根据内容高度撑开

工作中需要用到一个自适应高度的输入框，要能根据的内容高度撑开输入框的高度。找了半天都很复杂，反正我是笨看不懂也懒得看，只能自己撸一个了。

 

本文不是使用textarea实现的，而是使用的contenteditable="true"属性，非常简单的实现元素内的内容可编辑。由此实现模仿textarea自适应 / textarea高度自适应的效果。

 

没有效果图的文章不是好文章，废话不多说先上图：

 

上代码（直接复制到.txt另存为.html，即可看到效果）:

<div contenteditable="true" style="background-color: #FFEDB9;"></div>

另外附一小代码，都可以试试:

<div style="display: flex;">
	<!-- <div style="width: 80px;height: 21px;background-color: #C6F5FF;line-height: 21px;flex-shrink: 0">订单备注：</div> -->
	<div contenteditable="true" style="flex-grow:1;flex-shrink:1;overflow: hidden;background-color: #FFEDB9;"></div>
</div>

 

亲测移动端浏览器、PC浏览器、Vue项目，都没问题！

 

 

如果我的文章对您有帮助，就请客官给个赞吧

THE END!