Search code examples
javascriptjquerytextboxcount

Count and display number of characters in a textbox using Javascript


I am working on a project that requires me to count the number of characters entered in a text box and dynamically display the result elsewhere on the page.

As I said, this would preferably be done in jQuery or Javascript.

Thanks in advance.


Solution

  • I would like to share my answer which i used in my project and it is working fine.

    <asp:TextBox ID="txtComments" runat="server" TextMode="MultiLine" Rows="4" Columns="50" placeholder="Maximum limit: 100 characters"></asp:TextBox><br />
    <span id="spnCharLeft"></span>
    
    <script type='text/javascript'>
        $('#spnCharLeft').css('display', 'none');
        var maxLimit = 100;
        $(document).ready(function () {
            $('#<%= txtComments.ClientID %>').keyup(function () {
                var lengthCount = this.value.length;              
                if (lengthCount > maxLimit) {
                    this.value = this.value.substring(0, maxLimit);
                    var charactersLeft = maxLimit - lengthCount + 1;                   
                }
                else {                   
                    var charactersLeft = maxLimit - lengthCount;                   
                }
                $('#spnCharLeft').css('display', 'block');
                $('#spnCharLeft').text(charactersLeft + ' Characters left');
            });
        });
    </script>
    

    Source: URL