Javascript 根据输入的最大长度更新进度条

我需要在一个特定的范围内，在一个特定的范围内

然后我需要一个简单的进度条，显示用户距离输入字段的最大长度有多近。假设输入限制为50个字符。当用户在输入中输入25个字符时，进度条应为50%

我已经尝试了下面的代码，但我不确定如何根据按键或最大字符数来完成

类似于我所追求的东西：

Vue代码：

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: ''
        };
    },
});

---

任何帮助都将不胜感激

您应该使用computed属性来计算进度

新Vue{ el:应用程序， 资料{ 返回{ 正文：， 最高：150 } }, 计算：{ 进展{ 返回this.text.length/this.max*100 } } } 您还有：个字符。

---

您应该使用computed属性来计算进度

新Vue{ el:应用程序， 资料{ 返回{ 正文：， 最高：150 } }, 计算：{ 进展{ 返回this.text.length/this.max*100 } } } 您还有：个字符。

---

您可能不需要检查按键事件。文本长度的计算属性可用于映射进度条

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="progress" id="progress"></progress>
    </div>
`,
computed: {
    progress: function(){
      return Math.floor((this.text.length/this.max)*100)
    }
}

---

您可能不需要检查按键事件。文本长度的计算属性可用于映射进度条

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="progress" id="progress"></progress>
    </div>
`,
computed: {
    progress: function(){
      return Math.floor((this.text.length/this.max)*100)
    }
}

---

如果可以的话，这里有一个带有一些样式的版本。它也使用computed属性来计算进度条值。代码段需要展开运行

新Vue{ el:应用程序， 数据：函数{ 返回{ 最高：50， 正文： }; }, 计算：{ 计算百分比{ 让contentLength=this.text.length； 返回contentLength/this.max*100； } } } 身体{ 背景：20262E； 填充：20px； 字体系列：Helvetica； } 应用程序{ 背景：fff； 边界半径：4px； 填充：20px； 过渡：均为0.2s； } .集装箱{ 宽度：30%； } 进展、投入{ 宽度：100%； 框大小：边框框； } 进展{ 高度：8px； 背景色：白色； 外观：无； } 进度[值]：-webkit进度条{ 背景颜色：浅灰色； 边界半径：2px； } 进度[值]：-webkit进度值{ 背景颜色：橙色； 边界半径：2px； } 您还有：个字符。

---

如果可以的话，这里有一个带有一些样式的版本。它也使用computed属性来计算进度条值。代码段需要展开运行

新Vue{ el:应用程序， 数据：函数{ 返回{ 最高：50， 正文： }; }, 计算：{ 计算百分比{ 让contentLength=this.text.length； 返回contentLength/this.max*100； } } } 身体{ 背景：20262E； 填充：20px； 字体系列：Helvetica； } 应用程序{ 背景：fff； 边界半径：4px； 填充：20px； 过渡：均为0.2s； } .集装箱{ 宽度：30%； } 进展、投入{ 宽度：100%； 框大小：边框框； } 进展{ 高度：8px； 背景色：白色； 外观：无； } 进度[值]：-webkit进度条{ 背景颜色：浅灰色； 边界半径：2px； } 进度[值]：-webkit进度值{ 背景颜色：橙色； 边界半径：2px； } 您还有：个字符。

---

你几秒钟就让我明白了这一点：谢谢你，艾米尔斯，工作起来很有魅力。斯蒂芬，谢谢你的评论哈哈！我们应该找另外一位专家打字。。。指标：D不是专家，但是+1：你几秒钟就让我明白了这一点：谢谢你，Emīls，很有魅力。斯蒂芬，谢谢你的评论哈哈！我们应该找另外一位专家打字。。。指标：D不是专家，但+1表示：D