textarea input 限制长度实时监听

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

Hero_rong

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

阅读量1.3k

点赞数 1

分类专栏： vue js 文章标签： vue 限制textarea长度限制textarea字数 textarea 实时监听 input实时监听

本文链接：https://blog.youkuaiyun.com/Hero_rong/article/details/85934112

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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