How to fill in the progress bar based on the number of letters entered?

Question

I am trying to create an input field that has a div at the bottom that will act as a progress bar to tell you when you have enough characters.

I can't get this animation to work, although I thought it would be much easier when I decided to try this project.

Please let me know what is wrong with my code. Thank!

<div id='cntnr'>
  <div id='inptDiv'>
    <input id='inpt1'>
    <div id='prgInd'></div>
  </div>
</div> 

---

var main = function() {
  var inptAmnt = document.getElementById('inpt1').value;
  if(inptAmnt.length === 1) {
    $('#prgInd').css('width', 25);
  }
}

$(document).ready(main);

I also tried this code first, but it didn't work either:

var main = function() {
  var inptAmnt = document.getElementById('inpt1').value;
  if(inptAmnt.length === 1) {
    $('#prgInd').animate({
      width:25
    },200 )
  }
}

$(document).ready(main);

JSFiddle: https://jsfiddle.net/qcsb53ha/

Answer 1

jQuery change, keyup paste input.

, ; , width .

"" 100 - reset 100. jQuery :

var desiredLength = 4; // no jokes please...

// Listen to the change, keyup & paste events.
$('#text-box').on('change keyup paste', function() {
    // Figure out the length of the input value
    var textLength = $('#text-box').val().length;

    // Calculate the percentage
    var percent = (textLength / desiredLength) * 100;
    // Limit the percentage to 100.
    if (percent > 100) {
      percent = 100;
    }

    // Animate the width of the bar based on the percentage.
    $('.progress-bar').animate({
      width: percent + '%'
    }, 200)
});

---

JSFiddle : https://jsfiddle.net/jqbka5j8/1/

. / .

, !

Answer 2

javascript, CSS Content Editable:

HTML

<div>
    <span contenteditable="true">sdfsd</span>
</div>

CSS

span 
{
    border: solid 1px black;
}
div 
{
    max-width: 200px;   
}

JsFiddle