Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET > Editor > Incorrect behavoiur RadEditor (5.6.4) on Tab key pressing.
RadControls for ASP.NET are no longer supported (see this page for reference). In case you have inquiries about the Telerik ASP.NET AJAX controls, post them in the pertinent ASP.NET AJAX forums.

Incorrect behavoiur RadEditor (5.6.4) on Tab key pressing.

Feed from this thread
  • Vyacheslav Zhitomirskiy avatar

    Posted on Sep 29, 2006 (permalink)

    I can’t achieve a correct behavior of the focus on pressing theTab key when I use a RadEditor control. The control ignores the value of the TabIndex property.
    Besides I can’t use more up-to-date version of the RadEditor.
    Could you please resolve me the problem.

  • Rumen Rumen admin's avatar

    Posted on Sep 29, 2006 (permalink)

    Hi Vyacheslav,

    The TabIndex property works properly in the latest version of r.a.d.editor 6.5.2.

    If you prefer not to upgrade then you can use the following hack to set the TabIndex property of r.a.d.editor 6.5.1 and earlier versions:

    <script>        
    function OnClientLoad(editor)        
    {        
        //get a reference to the editor's iframe     
        var iframe = document.getElementById("RadEContentIframe" + editor.Id);         
        //set the tabIndex attribute to the iframe     
        iframe.setAttribute("tabIndex", "3");       
    }     
     
    </script>    
    <radE:RadEditor id="RadEditor1" Runat="server" EnableTab="false" OnClientLoad="OnClientLoad"></RadE:RadEditor> 

    You should also set the editor EnableTab property to "false". This property indicates whether RadEditor will insert four empty spaces when the user presses the [Tab] key inside the editor's content area or will navigate between the controls on the page.

    Best regards,
    Rumen
    the telerik team

  • Vyacheslav Zhitomirskiy avatar

    Posted on Oct 2, 2006 (permalink)

    Thanks for your recommendation, it was very useful.
    But we have another problem now.
    There is a Button control with the next number of TabIndex property (for example, the Tabindex property of the RadEditor is 3 and the Tabindex property of the Button is 4). If the focus is in the RadEditor and the Tab key is pressed, the cursor remains in the RadEditor and the focus moves on the Button at the same time. If the Enter key is pressed after that, the postback doesn't occur.
    Could you help us to resolve this problem.

  • Rumen Rumen admin's avatar

    Posted on Oct 2, 2006 (permalink)

    Hello Vyacheslav,

    Here is a workaround to hide the cursor from the editor when the editor loses focus:

        <script>        
        function OnClientLoad(editor)        
        {        
            //get a reference to the editor's iframe     
            var iframe = document.getElementById("RadEContentIframe" + editor.Id);         
            //set the tabIndex attribute to the iframe     
            iframe.setAttribute("tabIndex", "3");       
            iframe.onblur = function()     
            {     
                editor.Document.body.contentEditable = false;                        
            }     
                  
            iframe.onfocus = function()     
            {     
                editor.Document.body.contentEditable = true;                         
            }     
                  
            window.setTimeout(function()     
            {     
                //get a reference to the desired element on the page on which you would like to set the focus     
                //when the page is loaded     
                var oTxt = document.getElementById("<%=TextBox1.ClientID%>");     
                //set the focus     
                oTxt.focus();}, 100);     
        }        
        </script>    
     
        <asp:TextBox runat="server" id="TextBox1" tabindex="1"></asp:TextBox>  
        <input type="text" tabindex="2">  
        <radE:RadEditor id="RadEditor1" Runat="server" EnableTab="false" SaveInFile="true" OnClientLoad="OnClientLoad">  
        </radE:RadEditor>  
        <asp:Button ID="Button1" Runat="server" TabIndex="4" Text="Submit"></asp:Button> 

    I hope this helps.

    Kind regards,
    Rumen
    the telerik team

  • Vyacheslav Zhitomirskiy avatar

    Posted on Oct 2, 2006 (permalink)

    Thanks a lot. We could resolve our problems.

  • Shakti avatar

    Posted on Jun 30, 2011 (permalink)

    Hi,

    I use radeditor 7.3.6.0.The property EnableTab is set 'false'.
    On <tab> key press, it inserts 4 blank spaces in chrome and safari wherein in IE and FF it goes to the next editable control field.
    Right now, i expect the same behavior as in IE and FF.

    As per your previous post, I tried calling a java script function via 'OnClientLoad' which unfortunately didnt work in my case.

    Can you help to get through this?

    Regards
    Shakti




  • Rumen Rumen admin's avatar

    Posted on Jul 4, 2011 (permalink)

    Hi Shakti,

    You can try the following workaround:

    <script type="text/javascript">
    function OnClientLoad(editor)
    {
      editor.AttachEventHandler ("keydown", function (e)
      {
         if (e.keyCode == 9)
         {
            document.getElementById("RadEDesignButtonRadEditor1").focus();
         }
      }
     );
    }
    </script>
    <radE:RadEditor ID="RadEditor1" OnClientLoad="OnClientLoad" EnableTab="false" EnableDocking="false" runat="server"></radE:RadEditor>


    All the best,
    Rumen
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET > Editor > Incorrect behavoiur RadEditor (5.6.4) on Tab key pressing.