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>
I hope you found your best solution....
Do you like below Tutorials ?
- Laravel 5.6 - Collection could not be converted to int
- Laravel - How to generate secure https URL from route?
- Laravel - Vue JS File Upload Example
- How to get last 7 days data in Laravel?
- Laravel Validation required if other field empty example
- Laravel Eloquent - When Case Statement in Select Query Example
- Laravel 7.x and 6.x Passing Variable to Javascript Example
- How to pass PHP variables in JavaScript or jQuery?