locked
Character Counter for Multiline Textbox RRS feed

  • Question

  • User-1848901697 posted

    Best one I found:

    http://javascript.internet.com/forms/character-counter.html

    Also works with a regular textbox, of course.  Although this is a javascript widget, I used it with an ASP.NET textbox using this markup:

    <asp:TextBox ID="tbx_EntryDescription" runat="server"
                                Height="180px" Width="220px" TextMode="MultiLine"
                                OnKeyUp="toCount('tbx_EntryDescription','chr_EntryBanner','{CHAR} characters left',350);">
                                </asp:TextBox><br />
                                <span id="chr_EntryBanner">350 characters left.</span>

    Don't forget to put this code in the <head> section of your page: 

    <script type="text/javascript" src="charcount.js"></script>

    And then put the "charcount.js" (or whatever you name the .js file) in the same directory as your page. HTH someone...
     

    Monday, June 2, 2008 11:01 AM

All replies

  • User-1167255018 posted

    Hey Hi,

    how about this........ here the length is 500 characters, can change to user needs

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="tbcount.aspx.cs" Inherits="tbcount" %>

    <script language = "Javascript">

    function tbLimit() {

    var tbObj=event.srcElement;

    if (tbObj.value.length==tbObj.maxLength*1) return false;

    }

    function tbCount(visCnt) {

    var tbObj=event.srcElement;

    if (tbObj.value.length>tbObj.maxLength*1) tbObj.value=tbObj.value.substring(0,tbObj.maxLength*1);

    if (visCnt) visCnt.innerText=tbObj.maxLength-tbObj.value.length;

    }

    </script>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >

    <head id="Head1" runat="server">

    <title>Untitled Page</title>

    </head>

    <body>

    <form id="form1" runat="server">

    <div>

    <asp:TextBox ID="TextBox1" runat="server"

    Columns="30" Rows="10"

    TextMode="MultiLine" ></asp:TextBox>

    <br />

    <asp:Label ID="Label1" runat="server"></asp:Label></div>

     

    </form>

    </body>

    </html>

    ------------------------------------------Code Behind----------------------------------------

    using System;
    using System.Data;
    using System.Configuration;
    using System.Collections;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    
    public partial class tbcount : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            TextBox1.Attributes.Add("onkeypress", "return tbLimit();");
            TextBox1.Attributes.Add("onkeyup", "return tbCount(" + Label1.ClientID + ");");
            TextBox1.Attributes.Add("maxLength", "500");
        }
    
    
    }
    

     

    Thanks

    Friday, June 13, 2008 11:06 AM
  • User436664564 posted

     hi

    why the last code doesn't work in firefox 3?

    Friday, October 17, 2008 6:03 AM
  • User798903548 posted

    I don't believe that event.srcElement exists in Firefox. In Firefox I believe that it is event.target. Try
     var tbObj = (typeof event.target != 'undefined') ? event.target : event.srcElement;

    NC...

    Monday, October 20, 2008 1:48 PM
  • User1163347865 posted

    novicehere, 

    I used your code, it works great, thanks!

    Except, it only works in IE, drat the luck.

    Wednesday, April 8, 2009 1:10 PM
  • User1163347865 posted

    I ended up using the following and it worked in IE and Firefox and was super-simple, no code-behind (not that there's anything wrong with code-behind):

    http://www.rosshawkins.net/archive/2006/12/04/asp.net-text-counter.html.aspx

    Note that the example uses an html input. Brilliantly obvious! Except that, well, it's a textbox and you want an asp:Label (which renders as a <span>). I added an inline style border: solid 0px white; so it appears to be text in a span instead of text in a label.

     I hope this helps some poor soul out there such as myself who spent too much time on this.

    Friday, April 10, 2009 11:46 AM
  • User-1290112936 posted
    Can you post how you did a span label control. I was trying to duplicate this, but I haven't had any luck. I haven't worked with 's before. thanks, Mike
    Wednesday, May 13, 2009 12:46 PM
  • User1163347865 posted

    Sure thing, here's the script in the <head>:

     
        <script type="text/javascript" language="Javascript">
            //Character count script!
            function textCounter(field, countfield, maxlimit) {
                if (field.value.length > maxlimit)
                    field.value = field.value.substring(0, maxlimit);
                else
                    countfield.value = maxlimit - field.value.length;
            }
        </script>
     

     And here is the <asp:TextBox> where the script is invoked:

     
    <asp:TextBox ID="uxCommentsNoTextbox" runat="server" Height="100" Width="550" Wrap="true"
               TextMode="MultiLine" onkeyup="textCounter(uxCommentsNoTextbox, this.form.uxCommentsCharCount, 1500);"
               onkeydown="textCounter(uxCommentsNoTextbox, this.form.uxCommentsNoCharCount, 1500);" />
    

      

    And the above is referring to an input field with id of "uxCommentsCharCount", which is here:

    <input readonly="readonly" type="text" id="uxCommentsNoCharCount" name="uxCommentsNoCharCount"
           size="4" maxlength="4" value="" style="border: solid 0px white; background: white;" />
     So I'm using an input instead of a <span>, and the inline style I have makes it look like just text and not an input box.
    Wednesday, May 13, 2009 12:55 PM
  • User-1290112936 posted

    Thanks for the quick response.  I have those two things and they are working well.   I was hoping to see your <SPAN> that shows the counter.  I didn't want to use the HTML Input control.  I am looking for your countfield control.  Thanks again, Mike

    Wednesday, May 13, 2009 1:04 PM
  • User1163347865 posted

    I got interrupted at work before completing my post above, I edited it, take a look.

    Wednesday, May 13, 2009 1:25 PM
  • User225883152 posted

    thanks a lot its working fine in both mozilla and IE thanks for ur help friend

    Sunday, April 17, 2011 11:42 PM
  • User1175265121 posted

    Here is a nice lightweight jQuery plugin:

    http://plugins.jquery.com/project/CharsLeftCounter

     

    This plugin limits the text length of a textbox/textarea that can be entered and displays how many chars are left.

    Parameters:

    1.) Container: Textbox/Textarea (DOM object that supports the Value-Property) where you attach the plugin.

    2.) An output element id, where you want to display the chars left count.

    3.) Char limit count

    example:
    $('#TextAreaId').CharsLeftCounter('spanId', 10);

    Wednesday, May 18, 2011 8:51 AM
  • User-739391043 posted

    I have created a stand-alone control that renders everything. We have used it in WebParts deployed on SharePoint sites so it works in a masterpage scenario too. You can check it out here:

    http://jasear.wordpress.com/2009/04/03/net-webcontrol-textbox-with-a-countdown-counter/

    Thursday, January 5, 2012 10:54 AM
  • User1485171861 posted

    why would i get this error:

    Microsoft JScript runtime error: 'toCount' is undefined

    Friday, January 27, 2012 1:25 PM
  • User-1678569790 posted

    Hi,

    It worked for me. :)

    ________________-

    Oscar Gómez

    Engineer at PSL

    http://www.pslcorp.com/

    Wednesday, February 22, 2012 11:52 PM
  • User-1366190559 posted

    I get same error (my txtbox id = txtBID) -- Microsoft JScript runtime error: 'txtBID ' is undefined. I used this ID name in the onkeyup/down code.

    Wednesday, April 10, 2013 5:32 PM