textarea input 限制长度 实时监听

<div class="input">
  <textarea @input="descArea" name="" id="" cols="30" rows="10" v-model="textareaDesc" placeholder="请填写备注信息,如:需带个人简历、身份说明"></textarea>
   <p>{{zero}}/{{max}}</p>
</div>

<script>
export default {
  name: 'invitation',
  data() {
    return {
      list: ['待查阅', '已查阅', '已购买', '已邀约', '不合适'],
      textareaDesc: '',
      zero: '0',
      max: '400'
    };
  },
  methods: {
    descArea: function () {
      console.log(this.textareaDesc.length);
      console.log(this.textareaDesc);
      this.zero = this.textareaDesc.length;
      if (this.textareaDesc.length > 400) {
        this.zero = 400;
        this.textareaDesc = this.textareaDesc.slice(0, 401);
      }
    }
  }
};
</script>

        

话不多说直接上图，首先，监听 textarea 的内容变化，我们可以用input方法，因为我们是vue项目，所以 textarea 的vule 我们换成 v-model ，这样方便数据交互。

然后我们限制长度（限制字数，我这里是400），思路就是，获得输入的内容的长度，即 this.textareaDesc.length ，判断该长度是否超过400 ，如果超过400，我们就截取0-400之间的，超过400的不予显示，要显示选定的元素 ，就用slice（start,end），这里要注意，start是包含的，end则是不包含的，就相当于，你要是要截取3个字符，那就得 slice（0,4）。

以上就是限制长度啦，本文方法对 input 和 textarea 都适用