Support forums » Products » Cute Editor for .NET » Re: How to display javascript alert for exceeding text length?

How to display javascript alert for exceeding text length?

Last post 09-07-2015, 9:02 AM by Kenneth. 7 replies.
Sort Posts: Previous Next

  •  01-19-2011, 5:47 PM 65799

    How to display javascript alert for exceeding text length?

    Reply Quote
    I am trying to add javascript alert to force users when they exceed 500 characters. Any thoughts on how to accomplish this? If control will not allow additional text, then its lot better instead of throwing alert but I didnt see anyway to do that using properties.
     
    Thanks for help!

  •  01-19-2011, 6:58 PM 65800 in reply to 65799

    Re: How to display javascript alert for exceeding text length?

    Reply Quote
    Dear karmyogi,
     
    Please refer to the following snippet:
    <%@ Page Language="C#"%>
    <%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>
    <html>
        <head>
      <title>JavaScript API</title>
       <script language="JavaScript" type="text/javascript" >    
           function CE_attachEvent() {
               // get the cute editor instance
               var editor1 = document.getElementById('<%=Editor1.ClientID%>');
               //Get the editor content 
               var editdoc = editor1.GetDocument();
               // attach Event
               if (editdoc.attachEvent)
                   editdoc.attachEvent('onkeypress', HandleChange);
               else if (editdoc.addEventListener)
                   editdoc.addEventListener('keypress', HandleChange, true);
           }
           function CE_detachEvent() {
               // get the cute editor instance
               var editor1 = document.getElementById('<%=Editor1.ClientID%>');
               //Get the editor content 
               var editdoc = editor1.GetDocument();
               // detach Event
               if (editdoc.detachEvent)
                   editdoc.detachEvent('onkeypress', HandleChange);
               else if (editdoc.removeEventListener)
                   editdoc.removeEventListener('keypress', HandleChange, true);
           }
           function HandleChange() {
               // get the cute editor instance
               var editor1 = document.getElementById('<%=Editor1.ClientID%>');           // Get the editor HTML
               text = editor1.getHTML();
               if (text.length > 10) {
                   alert("the string length is limited to 10");
               }
           }      
      </script>
      <script runat="server">
      override protected void OnInit(EventArgs e)
      {
       base.OnInit(e); 
      }
      </script>
     <body>
            <form id="Form1" runat="server">  
       <table cellpadding="15">
        <tr>     
         <td>
          <h1>JavaScript API</h1>
          This example shows you how to use CuteEditor JavaScript API to customize the application.
          <br /><br />
          <CE:Editor id="Editor1" Width="560" TemplateItemList="[Save,Bold,Italic,Underline,InsertChars,InsertEmotion]" ThemeType="OfficeXP" Height="250" EditorWysiwygModeCss="../example.css" runat="server"></CE:Editor><br />
          <p style="width:600">    
          <INPUT type=button value="attach Event (onkeypress)" onclick="CE_attachEvent()">
          <INPUT type=button value="detach Event (onkeypress)" onclick="CE_detachEvent()">
          </P>
              </td>
        </tr>
       </table> 
      </form>
     </body>
    </html>
    <script language="JavaScript" type="text/javascript" >
        var editor1 = document.getElementById("<%=Editor1.ClientID%>");
        if (editor1.IsReady) CuteEditor_OnInitialized(editor);
           function CuteEditor_OnChange(editor) {
            }      
        </script>
     
    Thank you for asking

  •  01-20-2011, 1:47 PM 65807 in reply to 65800

    Re: How to display javascript alert for exceeding text length?

    Reply Quote
    Eric, Thanks for the code. The HandleChange() function you mentioned checks for HTML length via getHTML(). My requirement is to limit the the total characters that user types in. Does the control have a similar function to check the characters I.e. like getText() or something similar?
     
    One more item. I tried the function you sent it works gr8 on button click event. I need to call the same attach function during load process without having user to click the button. I tried few things without much luck. Any idea on where to call this function? I.e. Is there any onFocus or similar event that I can use in Javascript to call this CE_attachEvent() function? This way, I can have this even fired automatically when user gets focus to edit the data.
     
    Appriciate your help.

  •  01-20-2011, 8:34 PM 65809 in reply to 65807

    Re: How to display javascript alert for exceeding text length?

    Reply Quote
    Hi karmyogi,
     
    Please try the example below. Limit 5 characters.
     
    1. <%@ Page Language="C#" %>  
    2.   
    3. <%@ Register Assembly="CuteEditor" Namespace="CuteEditor" TagPrefix="CE" %>  
    4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    5. <html xmlns="http://www.w3.org/1999/xhtml">  
    6. <head id="Head1" runat="server">  
    7.     <title>GetPlainText</title>  
    8. </head>  
    9. <body>  
    10.     <form id="form1" runat="server">  
    11.         <CE:Editor ID="editor1" runat="server" ShowBottomBar="false">  
    12.         </CE:Editor>  
    13.         <div id="plainText" style="visibility: hidden">  
    14.         </div>  
    15.     </form>  
    16. </body>  
    17. </html>  
    18.   
    19. <script>  
    20. function isIE() {  
    21.     if (window.navigator.userAgent.toLowerCase().indexOf("msie") != -1) return true;  
    22.     else return false;  
    23. }  
    24.   
    25. function GetTextLenght() {  
    26.   
    27.     var editor1 = document.getElementById('<%= editor1.ClientID %>');  
    28.     var plainText = document.getElementById("plainText");  
    29.     plainText.innerHTML = editor1.GetHTML();  
    30.     var text;  
    31.     if (isIE()) {  
    32.         text = plainText.innerText;  
    33.     }  
    34.     else {  
    35.         text = plainText.textContent;  
    36.     }  
    37.     plainText.innerHTML = "";  
    38.     return text.length;  
    39. }  
    40.   
    41. function disableEvent(oEvent)  
    42. {  
    43.     if(GetTextLenght()>=5)  
    44.     {  
    45.         //alert("characters more than 5");  
    46.         oEvent.preventDefault();     
    47.     }  
    48.      
    49. }  
    50. function CuteEditor_OnInitialized(editor)  
    51. {  
    52.     var editdoc = editor.GetDocument();  
    53.     if(window.addEventListener)  
    54.     {  
    55.           
    56.         editdoc.addEventListener("keypress",disableEvent,"false");  
    57.     }  
    58.      
    59.     editdoc.body.onkeydown=function()  
    60.     {  
    61.         if(GetTextLenght()>=5)  
    62.         {  
    63.             return false;  
    64.         }  
    65.          
    66.     }  
    67. }  
    68. </script> 
     
    Regards,
     
    Ken

  •  09-02-2015, 4:01 AM 80891 in reply to 65809

    Re: How to display javascript alert for exceeding text length?

    Reply Quote

    Dear Ken,

     

    I've used the function you mentioned.
    But the GetTextLength result is different from the characters shown in the editor.

    How can I use jquery or javascript to get the Characters shown in the editor?

     

    Thanks,

    Surrounding 

  •  09-02-2015, 8:09 AM 80892 in reply to 80891

    Re: How to display javascript alert for exceeding text length?

    Reply Quote

    Hi,

     

    you can use the code below to get the editor content by javascript.

     

    var editor1 = document.getElementById('<%= editor1.ClientID %>');   

    editor1.getHTML ();

     

    Regards,

     

    Ken 

  •  09-04-2015, 2:47 AM 80925 in reply to 80892

    Re: How to display javascript alert for exceeding text length?

    Reply Quote

    Dear Ken,

     

    I am sorry that the result are not the same.

    I need to show the characters accurately, because there would be the characters limitation.

    There would be a javascript to do the character length limitation. 

    User will confuse that if the characters shown in editor is different from the javascript alert. 

  •  09-07-2015, 9:02 AM 80960 in reply to 80925

    Re: How to display javascript alert for exceeding text length?

    Reply Quote

    Hi,

     

    Try the way below please.

     

    1. <%@ Page Language="C#" %>  
    2.   
    3. <%@ Register Assembly="CuteEditor" Namespace="CuteEditor" TagPrefix="CE" %>  
    4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    5. <html xmlns="http://www.w3.org/1999/xhtml">  
    6. <head id="Head1" runat="server">  
    7.     <title>GetPlainText</title>  
    8. </head>  
    9. <body>  
    10.     <form id="form1" runat="server">  
    11.         <CE:Editor ID="editor1" runat="server">  
    12.         </CE:Editor>  
    13.         <input type="button" value="GetPlainText" onclick="GetPlainText()" />  
    14.         <div id="plainText" style="visibility: hidden">  
    15.         </div>  
    16.     </form>  
    17. </body>  
    18. </html>  
    19.   
    20. <script>  
    21. function isIE() {  
    22.     if (window.navigator.userAgent.toLowerCase().indexOf("msie") != -1) return true;  
    23.     else return false;  
    24. }  
    25.   
    26. function GetPlainText() {  
    27.   
    28.     var editor1 = document.getElementById('<%= editor1.ClientID %>');  
    29.     var plainText = document.getElementById("plainText");  
    30.     plainText.innerHTML = editor1.GetHTML();  
    31.     var text;  
    32.     if (isIE()) {  
    33.         text = plainText.innerText;  
    34.     }  
    35.     else {  
    36.         text = plainText.textContent;  
    37.     }  
    38.   
    39.     alert(text.length);  
    40.     plainText.innerHTML = "";  
    41. }  
    42. </script>  
     

    Regards,

     

    Ken 
View as RSS news feed in XML