Currently, I am in the process of creating a form that requires one of the fields to have a maximum character limit. Additionally, I am looking to include a progress bar that visually indicates how close the user is to reaching this limit. For instance, if the character limit is set at 50, when the user inputs 25 characters, the progress bar should display 50% completion.
Although I have attempted to implement this functionality using the code below, I am uncertain on how to tie it to keypress events or enforce the maximum character count:
Here is an example image illustrating what I want to achieve:
https://i.sstatic.net/ICVxZ.png
Below is my Vue.js code snippet:
Vue.component('count-fieldtype', {
mixins: [Fieldtype],
template: `
<div>
<input type="text" class="form-control type-text mb-2" placeholder="" :maxlength="max" v-model="text" />
<small class="help-block">You have: <strong><span v-text="(max - text.length)"></span></strong> characters left.</small>
<progress max="100" :value="calculatePercentage(value)" id="progress"></progress>
</div>
`,
methods: {
calculatePercentage(value) {
let contentLentg = handleKeyUp();
return 50;
}
},
data: function() {
return {
max: 50,
text: ''
};
},
});
If anyone could offer guidance on achieving this feature, it would be greatly appreciated!