Character Counter for Multiline Textbox : The Official Microsoft ASP.NET Forums

Reply

Gaucho

Participant

892 Points

240 Posts

Character Counter for Multiline Textbox

Jun 02, 2008 03:01 PM|LINK

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:

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

Moved by XIII on Jun 02, 2008 03:12 PM
Locked by XIII on Apr 11, 2013 02:27 PM
Unlocked by XIII on Apr 11, 2013 02:27 PM

Reply

novicehere

Contributor

4654 Points

854 Posts

Re: Character Counter for Multiline Textbox

Jun 13, 2008 03:06 PM|LINK

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" %>

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">

<title>Untitled Page</title>

</head>

<body>

<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

Keyboard not found. Please Press < F1 > to RESUME

Please Remember to Mark as Answer for the post(s) that help you.....so it can help others......Thanks

Reply

ashkant

Member

434 Points

284 Posts

Re: Character Counter for Multiline Textbox

Oct 17, 2008 10:03 AM|LINK

hi

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

Please remember to click “Mark as Answer” on the post that helps you

Reply

NC01

All-Star

82577 Points

15430 Posts

MVP

Re: Character Counter for Multiline Textbox

Oct 20, 2008 05:48 PM|LINK

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...

Reply

thohan

Member

10 Points

5 Posts

Re: Character Counter for Multiline Textbox

Apr 08, 2009 05:10 PM|LINK

novicehere,

I used your code, it works great, thanks!

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

Edited by thohan on Apr 08, 2009 05:11 PM
Edited by thohan on Apr 09, 2009 06:10 PM

Reply

thohan

Member

10 Points

5 Posts

Re: Character Counter for Multiline Textbox

Apr 10, 2009 03:46 PM|LINK

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.

Reply

QMIMike

Member

9 Points

26 Posts

Re: Character Counter for Multiline Textbox

May 13, 2009 04:46 PM|LINK

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

Reply

thohan

Member

10 Points

5 Posts

Re: Character Counter for Multiline Textbox

May 13, 2009 04:55 PM|LINK

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.

Edited by thohan on May 13, 2009 04:57 PM
Edited by thohan on May 13, 2009 05:23 PM
Edited by thohan on May 13, 2009 05:24 PM

Reply

QMIMike

Member

9 Points

26 Posts

Re: Character Counter for Multiline Textbox

May 13, 2009 05:04 PM|LINK

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

Reply

thohan

Member

10 Points

5 Posts

Re: Character Counter for Multiline Textbox

May 13, 2009 05:25 PM|LINK

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

Character Counter for Multiline Textbox RSS

15 replies

Gaucho

Character Counter for Multiline Textbox

novicehere

Re: Character Counter for Multiline Textbox

ashkant

Re: Character Counter for Multiline Textbox

NC01

Re: Character Counter for Multiline Textbox

thohan

Re: Character Counter for Multiline Textbox

thohan

Re: Character Counter for Multiline Textbox

QMIMike

Re: Character Counter for Multiline Textbox

thohan

Re: Character Counter for Multiline Textbox

QMIMike

Re: Character Counter for Multiline Textbox

thohan

Re: Character Counter for Multiline Textbox

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft