javascript - 背景显示输入字符的进度

Question

我有一个输入框，我希望输入框的背景在每次输入内容时填充。所以背景显示输入框的进度。

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

156个字符为100%；

Answer 1

$("#title").on('keyup', function(){
  var maxlength = $(this).attr("maxlength");
  var percentage = Math.floor($(this).val().length / maxlength * 100) + '%';
  $("#percentage").text(percentage);
  $("#bg").css({width: percentage});
})

.container {
  position:relative;
  display:inline-block;
}

#bg { 
  position: absolute;
  left:0px;
  background-color:lightblue;
  width:0%;
  height:16px;
  top:1px;
  z-index:0; 
}

#title { 
  padding-right:30px;
  position:relative;
  z-index:1;
  background:transparent;
}

#percentage { 
  font-size:10px; 
  color:#777; 
  position:absolute; 
  right: 5px;
  top:3px;
  z-index:2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <input class="controlinput" id="title" maxlength="156" data-class=".title" type="text">
  <span id="percentage"></span>
  <div id="bg"></div>
</div>