Keyboard events Issue

Last post 08-24-2006, 6:51 PM by Paparao Gummadapu. 2 replies.
Sort Posts: Previous Next
  •  08-22-2006, 11:59 PM 22057

    Keyboard events Issue

    I am trying to use the Keyboard events like onkeypress like shown in the following demo on your web site.
    http://cutesoft.net/example/JavaScript-API.aspx
     
    The issue is if invoke any command like getHTML or setFocus on the control the key event is not happening any more. I was able to reproduce this issue on the above mentioned link.
     
    The Following steps will reproduce the Issue i am talking about.
    1. Click on attach Event(on keypress) button
    2. Now type the text in the Rich Text Editor and onkeypress event is fired
    3. Click on getHtml or setFocus Button.
    4. Now enter the text again in the Rich Text Control and onkeypress event is not fired
    I was able to get the event fire by clicking inside Rich Text Editor first and then type the text then the event fires every time.
     
    Please let me know the fix or workaround for this.
  •  08-23-2006, 10:12 PM 22086 in reply to 22057

    Re: Keyboard events Issue

    Paparao Gummadapu,

    When you reset the whole HTML code of the editor, you may reattach the event.

    In other situations, the even won't lost.

    Please check the following movie:

    Http://CuteSoft.net/flash/JavaScript-API.swf

    asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
    Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
    asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
    asp wysiwyg html editor: http://cutesoft.net/ASP
    asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
    Live Support: http://cutesoft.net/live-support/default.aspx

  •  08-24-2006, 6:51 PM 22103 in reply to 22086

    Re: Keyboard events Issue

    Here is the Simple Program and I can't get it to work. May be i am doing something wrong.
    Please review this and let me know what am i doing wrong?
     
    <%@ Page Language="C#" %>
    <%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>
    <script language="javascript">
    function AttachKeyBoardEvents(keyPressOnly)
    {
        var rtEditor = document.getElementById('<%=MessageEditor.ClientID%>');
        var rtEditorDoc = rtEditor.GetDocument();
        // attach Event
        if(rtEditorDoc.attachEvent)
            rtEditorDoc.attachEvent('onkeypress',HandleRTEKeyPress);
        else if(rtEditorDoc.addEventListener)
            rtEditorDoc.addEventListener('keypress',HandleRTEKeyPress,true);
        if(keyPressOnly == undefined)
        {
            if(rtEditorDoc.attachEvent)
                rtEditorDoc.attachEvent('onkeydown',HandleRTEKeyDown);
            else if(rtEditorDoc.addEventListener)
                rtEditorDoc.addEventListener('keydown',HandleRTEKeyDown,true);
        }
    }
    function DetachKeyBoardEvents(keyPressOnly)
    {
        var rtEditor = document.getElementById('<%=MessageEditor.ClientID%>');
        var rtEditorDoc = rtEditor.GetDocument();
        // detach Event
     if(rtEditorDoc.detachEvent)
      rtEditorDoc.detachEvent('onkeypress',HandleRTEKeyPress);
     else if(rtEditorDoc.removeEventListener)
      rtEditorDoc.removeEventListener('keypress',HandleRTEKeyPress,true);
        if(keyPressOnly == undefined)
        {
            if(rtEditorDoc.detachEvent)
                rtEditorDoc.detachEvent('onkeydown',HandleRTEKeyDown);
            else if(rtEditorDoc.removeEventListener)
                rtEditorDoc.removeEventListener('keydown',HandleRTEKeyDown,true);
        }
    }
    function HandleRTEKeyDown(e)
    {
       e = (e)?e:window.event;
       var kCode = (e.keyCode)?e.keyCode:e.which;// gets the keycode in ie or ns
       if(!e.ctrlKey && kCode == 13)
       {
            SendMessage();
            return false;
       }
    }
    function HandleRTEKeyPress(e)
    {
       e = (e)?e:window.event;
       var kCode = (e.keyCode)?e.keyCode:e.which;// gets the keycode in ie or ns
       if (e.ctrlKey && kCode == 10) { // Ctrl+Enter
            var rtEditor = $($('MessageEditorCtrlID').value);
      rtEditor.ExecCommand('break',false,'break');   
       }
    }
    function SendMessage()
    {
        var rtEditor = document.getElementById('<%=MessageEditor.ClientID%>');
        var rtEditorDoc = rtEditor.GetDocument();
        var rteText = rtEditorDoc.body.innerHTML;
        if(rteText == '')
        {
            alert('Please enter text to send.');
            return false;
        }
       
        document.getElementById('Message').innerHTML = rteText;
        rtEditorDoc.body.innerHTML = '';//Set message to empty
       
        //Set the Focus to RTE
        rtEditor.FocusDocument();
       
        //Reattach the Events
        DetachKeyBoardEvents(true);
        AttachKeyBoardEvents(true);
    }
    </script>
    <html>
    <head runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <table>
        <tr><td><div id="Message"></div></td></tr>
        <tr><td><input type=button id="sendbutton" value="send" onclick="SendMessage();"/></td></tr>
        </table>
        <div>
        <CE:Editor ID="MessageEditor" MaxHTMLLength="1000" Runat="server" Height="50%" Width="100%"
        FilesPath="~/Cutesoft_Client/CuteEditor" AutoConfigure="Minimal" ShowHtmlMode="False" ShowPreviewMode="False" ShowBottomBar="False" ThemeType="OfficeXP">
        </CE:Editor>  
            <script language=javascript>
                AttachKeyBoardEvents();
            </script>    
        </div>
        </form>
    </body>
    </html>
View as RSS news feed in XML