title: Display a limit counter of an input length
body: <p>I use the below jquery to limit the length of an input to 110 characters. Supplementary, it displays how many characters was inputted, but <strong>I want to display how many characters are left</strong>. Any help? Also, I will appreciate any suggestions about how to improve this code.</p>
  
  <pre><code>jQuery(document).ready(function(){
      jQuery("#post_title").prev("label").children(".adverts-form-required").after("&lt;span class=\"title-counter\"&gt;(&lt;input type=\"text\" value=\"0\" maxlength=\"3\" size=\"3\" id=\"title_counter\" readonly=\"\" style=\"background:#fff;\"&gt;)&lt;/span&gt;");
      jQuery("#post_title").keyup( function() {
          jQuery("#title_counter").val(jQuery("#post_title").val().length);
      });
      jQuery(".adverts-field-text #post_title").keyup( function() {
          var $this = jQuery(this);
          if($this.val().length &gt; 110)
              $this.val($this.val().substr(0, 110));
      });
  });
  </code></pre>
  
  <p>The input field:</p>
  
  <pre><code>&lt;div class="adverts-control-group adverts-field-text"&gt;
      &lt;label for="post_title"&gt;Title
          &lt;span class="adverts-form-required"&gt;*&lt;/span&gt;
      &lt;/label&gt;
      &lt;input name="post_title" id="post_title" type="text"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Updated the code, thanks to @dhaval-marthak. It works. The question is how to display an default information about the length limit in the <code>&lt;span class="title-counter"&gt;&lt;/span&gt;</code> tag when the input length is equal to 0? I tried this: <code>&lt;span class="title-counter"&gt;\(the input limit is 110 characters\)&lt;/span&gt;</code>, but it is not displayed again when I delete the inputted text.</p>
  
  <pre><code># add a span tag to display the counter
  jQuery("#post_title").prev("label").children(".adverts-form-required").after("&lt;span class=\"title-counter\"&gt;&lt;/span&gt;");
  
  # add an input length limit
  jQuery("#post_title").keypress(function(){
      if(this.value.length &gt; 110){
          return false;
      }
      jQuery(".title-counter").html("are left: " +(110 - this.value.length) +" characters");
  });
  </code></pre>