Change Font-Size within Input Field Based on Length W<input type="text" id="location" placeholder="Placeholder Text" />hat should happen when text within input fields are excessively long. The desired result we both agreed on was to change the font size on the fly. Thankfully this is extremely easy with a little bit of jQuery that listens to eve…

input.html

<style>
  #location {
  font-size: 100%;
  outline: none;
  width: 200px;
  height: 30px;
  display: table-cell; 
  vertical-align: middle;
  border: 1px solid #ccc;
}
</style>

<input type="text" id="location" placeholder="Placeholder Text" />

<script>
  $('#location').keypress(function() {
  
  var textLength = $(this).val().length;
  
  if(textLength < 20) {
   // Do noting 
  } else if (textLength < 40) {
      $(this).css('font-size', '85%');
  } else if (textLength > 40) {
      $(this).css('font-size', '70%');
  }
  
 //console.log(textLength);
});
</script>