如何在更新时显示正确的值

This is my code, it works fine in case of insert but in case of update it is not working same.

While inserting the counter shows 0/500 as soon as I enter anything, it replaces 0 with number of character I enter (it becomes 50/500).

But in case of update this textarea is already filled with 50 characters; in this case its cursor focus is still on 0/500 but as soon as I click elsewhere, i mean when textarea is out of focus, it displays correct value.

<textarea class="input-text" rows="5" id="gBann" name="reason" maxlength="500"  placeholder="Leave reason " onKeyUp="toCount('gBann','uBann','{CHAR} ',500);" autofocus><?=($this->input->post())?$this->input->post('reason'): $leave_record['reason']?></textarea>
<p><span id="uBann" class="minitext">0</span>/500</p>



<script type="text/javascript">
   function toCount(entrance,exit,text,characters) {  
   var entranceObj=document.getElementById(entrance);  
   var exitObj=document.getElementById(exit);  
   var length=entranceObj.value.length;  
   if(length <= 0) {  
      length = 0;  
      text='<span class="disable"> '+text+' <\/span>';  
      entranceObj.value=entranceObj.value.substr(0,characters);  
   }  
   exitObj.innerHTML = text.replace("{CHAR}",length);  
}
</script>

please provide me solution on how to display the filled character with / 500 in case of update.

As far as i have understood your question,

Their are two ways you can obtain your desired results.

First is by PHP, if you are saving this content somewhere, at the time of update you can fetch and echo the value directly to this span. See more on how to get length of string in PHP here

Second method is by using Javascript, checking the length of textarea as soon as your document is loaded. Something like below

var abc = document.getElementById("myTextarea").value.length;

and use this abc variable to replace it with your counter.