textarea高度自适应

8,752 阅读1分钟

需求

vue实现textarea随文本内容自动增高(原生可同理实现)

实现原理:textarea本身并不会随着文本高度而增高。给textarea套上外容器,使用绝对定位,设置height:100%; width:100%; 这样textarea就可以随着外容器的高度变化而变化。再利用块级元素填充文字,块元素可以随着文本高度自动增高。设置块元素visibility: hidden;样式与textarea一致即可。

代码如下:

<!--html-->
  <div class="v-textarea">
    <!--pre 文本通常会保留空格和换行符。-->
    <pre class="content">{{ value }}</pre>
    <textarea
      v-model="value"
      class="content"
      placeholder="请输入"
    />
  </div>
// js
data () {
    return {
        value: '', //输入中的文字
    }
},
/* css */
.v-textarea {
  position: relative;
  width: 100%;
  > textarea{
    resize:none;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: transparent;
  }
  > pre {
    visibility: hidden;
  }
  .content{
    min-height: 30px;
    border: 0;
    width: 100%;
    font-family:PingFangSC-Regular,PingFang SC;
    display: block;
    font-size: 14px;
    color: #333333;
    line-height: 1.3;
    padding: 5px 0;
    overflow:hidden;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-word;
  }
}

如需转载,烦请注明出处:juejin.cn/post/684490…