textarea input 限制长度实时监听-蒲公英云

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>
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70][]    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 1][]

话不多说直接上图，首先，监听 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 都适用

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 2