VueJS - How to set maxlength for textarea?

Hi Dev,

here I will let you know how you can ser countdown with remaining character count in textarea with VueJS application. you can simply set maxlength validation in textarea in VueJS. i gave you a full and simple example for maxlength validation example.

So If you want to check with your local then you can copy bellow html file and test it with your local system. i used CDM js and css file so don't need to make it download other thing, just copy bellow file:

index.html


<!DOCTYPE html>
<html>
<head>
  <title>VueJS - Set Maxlength for Textarea</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>

<div id="MyApp">
  <div class="row">
    <div class="col-md-3">
      <h1 class='text-default'><span>Add a comment</span> <em class="text-light">(up to a 160 Remain characters)</em></h1>
      <textarea class="form-control" v-on:keyup="liveCountDown" v-model="displayMsg" placeholder="Total Remaining..."></textarea>
      <p class='text-right text-small' v-bind:class="{'text-danger': generateErr }">{{totalRemainCount}}</p>
    </div>
  </div>
</div>

<script type="text/javascript">
  var MyApp = new Vue({
    el: '#MyApp',
    data: {
      limitmaxCount: 160,
      totalRemainCount: 160,
      displayMsg: '',
      generateErr: false
    },
    methods: {
      liveCountDown: function() {
        this.totalRemainCount = this.limitmaxCount - this.displayMsg.length;
        this.generateErr = this.totalRemainCount < 0;
      }
    }
  })
</script>

</body>
</html>

VueJS - How to set maxlength for textarea?

Do you like below Tutorials ?

New Articles

Blog Categories

Random Articles