Javascript 背景显示输入字符的进度

我有一个输入字段，我希望在每次输入某个内容时，输入字段的

背景
。因此背景显示了输入字段的进度

    <input class="controlinput" id="title" maxlength="156" data-class=".title" type="text">



156个字符为100%
 
$（“#title”）.on（'keyup'，function（）{
var maxlength=$（this.attr（“maxlength”）；
var percentage=Math.floor（$（this.val（）.length/maxlength*100）+'%'；
$（“#百分比”）。文本（百分比）；
$（“#bg”）.css（{width:percentage}）；
})
.container{
位置：相对位置；
显示：内联块；
}
#bg{
位置：绝对位置；
左：0px；
背景颜色：浅蓝色；
宽度：0%；
高度：16px；
顶部：1px；
z指数：0；
}
#标题{
右侧填充：30px；
位置：相对位置；
z指数：1；
背景：透明；
}
#百分比{
字体大小：10px；
颜色：#777；
位置：绝对位置；
右：5px；
顶部：3px；
z指数：2；
}

看起来您希望我们为您编写一些代码。虽然许多用户愿意为陷入困境的程序员编写代码，但他们通常只在海报已经试图自己解决问题时才提供帮助。演示这项工作的一个好方法是包括您迄今为止编写的代码、示例输入（如果有）、预期输出和实际获得的输出（控制台输出、回溯等）。你提供的细节越多，你可能收到的答案就越多。它工作得很好。谢谢：D。但是有没有办法让输入的背景显示过程？我的意思是，当我输入任何东西时，背景显示的是从左到右的过程。对不起，我的英语不是很好。是的，它几乎是正确的，但我需要这发生在我的输入字段的背景。因此，当我输入我的内容时，背景应该与我所知道的#bg容器的操作相同-不能为输入字段的一部分设置背景。这就是为什么我使用
#bg
div来模拟这种行为