Показать счетчик пределов входной длины

Question

Я использую нижеследующий jquery, чтобы ограничить длину ввода до 110 символов. Дополнительный, он показывает, сколько символов было введено, но Я хочу показать, сколько символов осталось. Любая помощь? Кроме того, я буду благодарен за любые предложения о том, как улучшить этот код.

jQuery(document).ready(function(){ 
    jQuery("#post_title").prev("label").children(".adverts-form-required").after("<span class=\"title-counter\">(<input type=\"text\" value=\"0\" maxlength=\"3\" size=\"3\" id=\"title_counter\" readonly=\"\" style=\"background:#fff;\">)</span>"); 
    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 > 110) 
      $this.val($this.val().substr(0, 110)); 
    }); 
}); 

Поле ввода:

<div class="adverts-control-group adverts-field-text"> 
    <label for="post_title">Title 
     <span class="adverts-form-required">*</span> 
    </label> 
    <input name="post_title" id="post_title" type="text"> 
</div> 

UPDATE

Обновленный код, благодаря @ Dhaval-marthak. Оно работает. Вопрос заключается в том, как отображать информацию по умолчанию о пределе длины в теге <span class="title-counter"></span>, когда входная длина равна 0? Я пробовал это: <span class="title-counter">\(the input limit is 110 characters\)</span>, но он не отображается снова, когда я удаляю введенный текст.

# add a span tag to display the counter 
jQuery("#post_title").prev("label").children(".adverts-form-required").after("<span class=\"title-counter\"></span>"); 

# add an input length limit 
jQuery("#post_title").keypress(function(){ 
    if(this.value.length > 110){ 
     return false; 
    } 
    jQuery(".title-counter").html("are left: " +(110 - this.value.length) +" characters"); 
}); 

Answer 1

Просто укажите свой лимит в HTML-коде? Он будет перезаписан счетчиком. Затем, когда текстовое поле пуст, перезагрузите HTML.

На основании ответа @ Dhaval-marthak в:

HTML

<textarea></textarea> 
<span id="remaining"></span> 
<span id="limit">(the input limit is 110 characters)</span> 

Javascript

$('textarea').keyup(function() { 
    if (this.value.length === 0) { 
     $('#limit').show(); 
     $('#remaining').hide(); 
    } else { 
     $('#limit').hide(); 
     $('#remaining').show(); 
    } 

    if (this.value.length > 110) { 
     return false; 
    } 

    $("#remaining").html("Remaining characters : " + (110 - this.value.length)); 
}); 

Обновлено Fiddle:http://jsfiddle.net/r34gM/185/