解决输入框随字数增加自适应高度

前言用div模仿div文本框（文本框高度自适应）1.利用html的contenteditable属性，构造一个类似textarea的可编辑的div2.v-model双向绑定会在添加contenteditable="true"属性后失效，用(v-html和@blur)实现3.div的css样式4.效果演示5.参考文章

前言

最近团队要求做一个可以填写提交简历之后就直接打印或者保存的功能，但是textare框无论怎么设置，超过一定的字数都会出现滚动条，这就让我很苦恼，因为想要保存或者打印的话，就要显示框内的全部内容。并且要能让数据进行双向绑定，实现表单的提交。在尝试了多种方法之后终于让我找到了以下方法。

用div模仿div文本框（文本框高度自适应）

1.利用html的contenteditable属性，构造一个类似textarea的可编辑的div

2.v-model双向绑定会在添加contenteditable="true"属性后失效，用(v-html和@blur)实现

代码如下（示例）：

<div class="textdiv" contenteditable="true" v-html="formData.resumeExp" @blur="formData.resumeExp=$event.target.innerText" ></div>

3.div的css样式

.textdiv{ width: 100%; border: 1px solid #EBEBEB; min-height: 24px; background-color: #FFF; border-radius: 5px 5px; overflow-y: auto; font-size: 0.9em; }

4.效果演示

5.参考文章

1）https://blog.csdn.net/xj_9264/article/details/85611526 2）https://blog.csdn.net/weixin_38169359/article/details/101771445?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param