Question

I have this textarea :

<textarea  name="comment" id="comment" cols="75" rows="5" class="txtarea"></textarea>

and this span for show character limits:

<span style="display:none" id="chars_left">1000</span>

now i need to show/hide span when focus/blur in textarea box. i create this jquery function, but this not work for me. what’s problem ? how to work jquery for my need?

<script>
 $('textarea').focus(function(){

      jQuery(this).find('#chars_left').show();       
})


// this function will hide divs when you leave that textarea
$('textarea').blur(function(){

      jQuery(this).find('#chars_left').hide();       
})
</script>

Answer 1

There were few things which required correction which you will see in the following text. You can directly access control when you have id, also Provide type in script tag. You were trying to find chars_left in the childs of textarea which was not required. You can use focusout event with focus.

Live Demo

<script type="text/javascript">
 $('textarea').focus(function(){    
      jQuery('#chars_left').show();       
})


// this function will hide divs when you leave that textarea
$('textarea').focusout(function(){

      jQuery('#chars_left').hide();       
})
</script>