How to Create a Textarea for Character Counter Using jQuery

Question

Need to limit the number of characters that are allowed to be entered into a textarea?

 

Answer 1

The Javascript

 

<script type="text/javascript" src="http://www.google.com/jsapi"></script>  

      

    <script type="text/javascript" language="javascript">  

    google.load("jquery", "1.4.2");  

      

    var characterLimit = 150;  

      

    google.setOnLoadCallback(function(){  

          

        $('#remainingCharacters').html(characterLimit);  

          

        $('#myTextarea').bind('keyup', function(){  

            var charactersUsed = $(this).val().length;  

              

            if(charactersUsed > characterLimit){  

                charactersUsed = characterLimit;  

                $(this).val($(this).val().substr(0, characterLimit));  

                $(this).scrollTop($(this)[0].scrollHeight);  

            }  

              

            var charactersRemaining = characterLimit - charactersUsed;  

              

            $('#remainingCharacters').html(charactersRemaining);  

        });  

    });  

 </script> 

 

The HTML

 <textarea id="myTextarea"></textarea>  

<p><span id="remainingCharacters"></span> characters remaining.</p>