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 ?
- PHP Convert Date String to Datetime Object
- Laravel Validation Different Value Example
- Jquery Redirect to URL After Specific Time Example
- User Roles and Permissions in Laravel Example
- How to Get Value of Selected Option in Vue JS?
- Laravel Change Password OLD Password Validation Example
- Vue JS Get String Length Example
- How to Active and Inactive Status in Laravel?