textarea隐藏滚动条显示全部

1、方法一：
适用于没有内容第一次输入内容的textarea

<textarea style="overflow-y:hidden; height:100px;resize:none;" 
        onpropertychange="this.style.height=this.scrollHeight + 'px'"  
        oninput="this.style.height=this.scrollHeight + 'px'">
</textarea>   

2、方法二：
使用contenteditable+textarea的方法，不足地方是在Android上会出现placeholder 的光标与文字不居中。

<div class="textarea-wrapper">
     <div class="content-editable" contenteditable="true">{{textareaContent}}</div>
     <textarea type="text" v-model="textareaContent" class="field-textarea" 
         @change="trimSpacesAndUppercase($event, 'textareaContent')"  
         maxlength="254" :placeholder="请输入内容">
     </textarea>
</div>

.textarea-wrapper {
  position: relative;
  display: block;
  width: 100%;
  padding: .1rem 0;
}
.content-editable {
    position: relative;
    z-index: -1;
    opacity: 0;
    display: block;
    width: 100%;
    font-size: .32rem;
    color: #666;
    padding: .1rem 0;
}
.field-textarea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: .1rem 0 0 0.4rem;
    font-size: .32rem;
    color: #464545;
    text-align: left;
    resize: none;
    overflow: hidden;
    background-color: transparent;
}
textarea:focus {
  border: 1px solid #6cb1ff;
  border-radius: 0.08rem;
}
textarea::placeholder {
      text-align: left;
      font-size: .32rem;
      color: #f00;
      padding: 0rem;
      margin: 0;
}

3、方法三：在Vue中使用
textarea组件

<template>
  <textarea type="text" @input="auto_grow" class="input-content" :value="value" maxlength="254" :placeholder="defaultText">
  </textarea>
</template>

<script>
export default {
  name: "NiuTextarea",
  props: {
    value: String,
    defaultText: String
  },
  methods: {
    auto_grow: function (e) {
      e.target.style.height = e.target.style.height || "5px";
      e.target.style.height = (e.target.scrollHeight) + "px";
      this.$emit("input", e.target.value)
    }
  }
}
</script>

<style scoped>
textarea {
  resize: none;
  border: none;
  overflow: hidden;
  word-break: break-all;
  height: 100%;
  color: #666;
  width: 100%;
  padding: 0.13rem 0.1rem 0.13rem 0.1rem;
  -webkit-appearance: none;
  font-size: 0.32rem;
}
textarea:focus {
  border: 1px solid #6cb1ff;
  border-radius: 0.08rem;
}
textarea::placeholder {
  text-align: left;
  font-size: 0.32rem;
  color: #999;
  padding: 0;
  margin: 0;
}
</style>

import Vue from 'vue';
import textareaVue from './textarea.vue';

Vue.directive('autoheight', {
  // 当被绑定的元素插入到 DOM 中时……
  update: function (el) {
    // 聚焦元素
    el.style.height = el.style.height || "5px";
    el.style.height = (el.scrollHeight) + "px";
  }
})

export default textareaVue

使用场景

<niu-textarea v-autoheight v-model="item.caseValue" :defaultText="请输入内容">
</niu-textarea>