Javascript Characters Counter/Remaining

<script type="text/javascript">


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>
<h4>Count This Text</h4>
      

        <asp:TextBox ID="txtToCount" TextMode="MultiLine"
                runat="server" onkeyup='textCounter(this, this.form.remLen, 160);'
                onkeydown="textCounter(this, this.form.remLen, 160);" />
        <br />
        <input readonly="readonly" type="text" name="remLen" size="3" maxlength="3" value="160" /> characters left

Regards,

Remember To Click On the Post That Helps U

Reply

Userr_

Member

2 Points

89 Posts

Re: Javascript Characters Counter/Remaining

Jul 18, 2010 10:21 AM|Userr_|LINK

Hi,

As I said I want the solution for radEditor

Br.

Reply

itsmemuthu

Contributor

2801 Points

708 Posts

Re: Javascript Characters Counter/Remaining

Jul 18, 2010 10:29 AM|itsmemuthu|LINK

check with this..

http://www.telerik.com/community/forums/aspnet-ajax/chart/charector-limit-in-rad-editor.aspx

Regards,

Remember To Click On the Post That Helps U

Reply

Userr_

Member

2 Points

89 Posts

Re: Javascript Characters Counter/Remaining

Jul 18, 2010 12:07 PM|Userr_|LINK

thanks for the link,I had seen this before but for some reasons it doesn't work for me!

I have this function which shows the remaining characters in here 10 to 0 . at this point my problem is when it reachs to 0 it contines with -1,-2,...

can you help me to stop it when it reachs to 0 ??

function OnClientLoad(editor) {
            editor.attachEventHandler("onkeydown", function (e) {
                var content = editor.get_text();
                var maxLenght = 10;
                var counter = 0;
                var message = 'You are not able to type more than ' + maxLenght + ' characters!';


                if (content) {
                    var punctRegX = /[!\.?;,:&_\-\-\{\}\[\]\(\)~#'"]/g;
                    var contentcontent = content.replace(punctRegX, "");
                    var trimRegX = /(^\s+)|(\s+$)/g;
                    contentcontent = content.replace(trimRegX, "");
                }




                var counter = $get("counter");
                counter.innerHTML = "Characters left: " + (maxLenght - content.length);


            });
        }

Thanks

Reply

Userr_

Member

2 Points

89 Posts

Re: Javascript Characters Counter/Remaining

Jul 18, 2010 12:07 PM|Userr_|LINK

thanks for the link,I had seen this before but for some reasons it doesn't work for me!

I have this function which shows the remaining characters in here 10 to 0 . at this point my problem is when it reachs to 0 it contines with -1,-2,...

can you help me to stop it when it reachs to 0 ??

function OnClientLoad(editor) {
            editor.attachEventHandler("onkeydown", function (e) {
                var content = editor.get_text();
                var maxLenght = 10;
                var counter = 0;
                var message = 'You are not able to type more than ' + maxLenght + ' characters!';


                if (content) {
                    var punctRegX = /[!\.?;,:&_\-\-\{\}\[\]\(\)~#'"]/g;
                    var contentcontent = content.replace(punctRegX, "");
                    var trimRegX = /(^\s+)|(\s+$)/g;
                    contentcontent = content.replace(trimRegX, "");
                }




                var counter = $get("counter");
                counter.innerHTML = "Characters left: " + (maxLenght - content.length);


            });
        }

Thanks

Reply

Userr_

Member

2 Points

89 Posts

Re: Javascript Characters Counter/Remaining

Jul 18, 2010 01:30 PM|Userr_|LINK

I have another question.

how to send an alert when it is the max characters

in this point is 10 which means when the remaing characters are 0 it should send the alert.

Thanks again

Reply

itsmemuthu

Contributor

2801 Points

708 Posts

Re: Javascript Characters Counter/Remaining

Jul 19, 2010 12:39 AM|itsmemuthu|LINK

did u make a try with this script from the above said link..it has both counter and alert..

<span id="counter" style="border: 1px solid red;text-align: right;">Characters left:</span>
<telerik:RadEditor ID="RadEditor" runat="server" OnClientLoad="OnClientLoad">
</telerik:RadEditor>


<script type="text/javascript">
var limitNum = 250;
var message = 'You are not able to type more than ' + limitNum + ' characters!';
var counter = $get('counter');


function LimitLength(mode)
{
    var rtfEditor = $find("<%=RadEditor.ClientID %>");
    if (mode == 2){
     var oValue = rtfEditor.get_textArea().innerHTML.trim().length;
     }
    else{var oValue = rtfEditor.get_html(true).trim();}
 

    if (oValue.length >= limitNum)
    {
        rtfEditor.set_html(oValue.substring(0, limitNum - 1));
        alert(message);
    }
    counter.innerHTML = "Characters left: " + ( limitNum - oValue.length );
}


function AttachHandlers(mode)
{
                  

    var rtfEditor = $find("<%=RadEditor.ClientID %>");
    if(mode==1)
    {
        rtfEditor.attachEventHandler("onkeyup", LimitLength);
        rtfEditor.attachEventHandler("onpaste", LimitLength);
        rtfEditor.attachEventHandler("onblur", LimitLength);
    }
    else
    {
        var textarea = rtfEditor.get_textArea();


        if(window.attachEvent)
        {
            textarea.attachEvent("onkeydown", LimitLength);
            textarea.attachEvent("onpaste", LimitLength);
            textarea.attachEvent("onblur", LimitLength);
        }
        else
        {
           textarea.addEventListener("keyup",LimitLength, true);
           textarea.addEventListener("paste", LimitLength, true);
           textarea.addEventListener("blur", LimitLength, true);
        }
    }
}


function OnClientLoad(editor, args)
{
    rtfEditor = editor;
    AttachHandlers(1);
    LimitLength(1);
                                                  

 

    editor.add_modeChange(function(sender, args)
    {
       var mode = sender.get_mode();
       if (mode == 1 || mode == 2)
       {
          AttachHandlers(mode);
          LimitLength(mode);
       }
  });
}
</script>

Regards,

Remember To Click On the Post That Helps U

Reply

Userr_

Member

2 Points

89 Posts

Re: Javascript Characters Counter/Remaining

Jul 19, 2010 02:48 AM|Userr_|LINK

I ger error on this line

var rtfEditor = $find("<%=RadEditor.ClientID %>");

Server Error in '/Forum' Application.
--------------------------------------------------------------------------------

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.Web.HttpException: The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

Reply

itsmemuthu

Contributor

2801 Points

708 Posts

Re: Javascript Characters Counter/Remaining

Jul 19, 2010 03:23 AM|itsmemuthu|LINK

Try removing the runat=server from the <head> tag in your document.

Regards,

Remember To Click On the Post That Helps U

Reply

Userr_

Member

2 Points

89 Posts

Re: Javascript Characters Counter/Remaining

Jul 19, 2010 03:47 AM|Userr_|LINK

it works fine now!Thanks

but is there any way I can keep the runat=server ??? won't it create bug for other features of the application!?

Reply

tanglin05

Participant

1170 Points

311 Posts

Re: Javascript Characters Counter/Remaining

Jul 20, 2010 03:37 PM|tanglin05|LINK

If you are use RadAjaxManager or RadAjaxPanels, then you need to surround your "raw" code blocks with RadCodeBlocks:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
   <script language="javascript" type="text/javascript">
       //Your code here that contains <% %> blocks
       //(You can safely wrap code with or without <% %>)
   </script>
</telerik:RadCodeBlock>

This should solve your problems and allow you to reset runat="server" in your head tag. Details:

http://www.telerik.com/help/aspnet-ajax/ajxradscriptblockradcodeblock.html

Todd Anglin
http://telerikwatch.com

Javascript Characters Counter/Remaining RSS

11 replies

Shortcuts