バックグラウンドには入力文字の進捗状況が表示されます

Question

私は入力フィールドを持っています。入力フィールドの何かが入力されるたびに入力フィールドのbackgroundが入力されるようにします。

<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>