textarea input 限制长度实时监听

最新推荐文章于 2024-02-12 23:20:49 发布

原创

最新推荐文章于 2024-02-12 23:20:49 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue 限制textarea长度 #限制textarea字数 #textarea 实时监听 #input实时监听

本文介绍在Vue项目中如何使用v-model监听textarea和input内容变化，实现输入长度限制。通过获取输入内容长度并与预设限制（如400字）比较，当超过限制时使用slice方法截取并显示前400个字符，确保内容不超过设定长度。

<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>