textarea框如何自适应高度

最新推荐文章于 2024-03-15 16:36:49 发布

diCommon

最新推荐文章于 2024-03-15 16:36:49 发布

阅读量451

点赞数

分类专栏： html css

本文链接：https://blog.csdn.net/u010613970/article/details/104553074

版权

css 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

刚做了个项目，项目有个需求，textarea框需要自适应高度，使用textarea标签的时候试了min-height和max-height，都不行，之后在网上查了一下资料，其他可以使用css3的属性，一个新的属性，user-modify，此属性的意思是div可以编辑状态
所以，可以说，此textarea非彼textarea，但同样也是可输入状态

因为我的项目是vue项目，所以代码方面都是vue

<div contenteditable="true" data-text="喜欢就评论" ref="myInput" autofocus @blur="anBlur" @focus="anFocus" class="textarea">{{text}}</div>

// 失去焦点
anBlur() {
  console.log("无焦点");
},
// 有焦点
anFocus() {
  console.log("有焦点");
}

css

.textarea{
  -webkit-user-modify: read-write-plaintext-only;
  min-height: 0.906666rem;
  max-height: 1.813333rem;
  overflow-x: hidden;
  overflow-y: auto;
}
[contentEditable=true]:empty:not(:focus):before {
  content: attr(data-text);
  color: #D6D9E0;
}