Progress bar follow input text

Question

Progress bar follow input text

Navigation

#1 by (5 votes)

4

Well I'm starting Bootstrap and I have a question about whether or not this is what I'm looking for. I have textarea where it should limit the content to 300 characters it is already working:

$(function(){
   $(".maxlength").keyup(function(event){
     var target    = $("#content-countdown");
     var max        = target.attr('title');
     var len     = $(this).val().length;
     var remain    = max - len;
     if(len > max)
     {
       var val = $(this).val();
       $(this).val(val.substr(0, max));
       remain = 0;
     }
     target.html(remain);
   });
});

Html:

Restam <span id="content-countdown" title="300">300</span>Caracteres) 
<textarea name="texto" id="content" class="maxlength" maxlength="300" cols="60" rows="5"></textarea>

I just wish that instead of decreasing the number, the progress bar will increase as the text is being typed and if it reaches 100% (300 characters) it blocks any other digit. Any idea or simpler way to do this?

jquery twitter-bootstrap bootstrap-3

asked by anonymous 03.06.2015 / 16:29

1 answer

What is an object returned in parentheses? Return Purchase status on automatic return of notification PagSeguro

score 5 · Accepted Answer

In HTML5 there is an element called progress , you can use it to achieve your goal:

$(function(){
$(".maxlength").keyup(function(event){
document.getElementById("progress").value = $(this).val().length;
var target    = $("#content-countdown");
var max        = target.attr('title');
var len     = $(this).val().length;
var remain    = max - len;
if(len > max)
{
var val = $(this).val();
$(this).val(val.substr(0, max));
remain = 0;
}
target.html(remain);
});
});

progress {
background-color: #f3f3f3;
border: 0;
height: 18px;
border-radius: 9px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>Restam<spanid="content-countdown" title="200">200</span>Caracteres)<br/>
<textarea name="texto" id="content" class="maxlength" maxlength="200" cols="60" rows="5"></textarea><br/>
<progress id="progress" max="200"></progress>