RadEditor Not Focusing in ContentArea

7 posts, 1 answers
  1. saad
    saad avatar
    19 posts
    Member since:
    Nov 2010

    Posted 20 Jun 2011 Link to this post

    Telerik Team

    i have 2 text boxes and one rad-editor on a page
    when i tab in rad-Editor it didn't focus on content area
    it focus on its other control like (image manager, alignment etc)



    I need to fix this issue as soon as possible
    your early response will be appreciated
    Regards
  2. Answer
    Rumen
    Admin
    Rumen avatar
    14462 posts

    Posted 20 Jun 2011 Link to this post

    Hello Saad,

    Try the following code:

    <script type="text/javascript">
    function OnClientLoad(editor, args)
    {
    var buttonsHolder = $get(editor.get_id() + "Top"); //get a reference to the top toolbar zone of the editor
    var buttons = buttonsHolder.getElementsByTagName("A"); //get a reference to all A elements on the toolbar and disable the tabbing trough them
    for (var i=0; i< buttons.length; i++)
    {
    var a = buttons[i];
    a.tabIndex = -1;
    a.tabStop = false;
    }
    }
    </script>
    <telerik:radeditor OnClientLoad="OnClientLoad" runat="server" ID="RadEditor1">
    </telerik:radeditor>


    Regards,
    Rumen
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. Chuck
    Chuck avatar
    2 posts
    Member since:
    Mar 2011

    Posted 01 Aug 2011 Link to this post

    I tried this solution.  It works very well by disabling the toolbar items (tabstop = false for all of them).  But it doesn't add focus on the editable area - looks like it is just focusing the entire control.

    In short, my users can't tab and type.  They have to tab to the control, then click it, then begin typing.

  4. Terance Emory
    Terance Emory avatar
    33 posts
    Member since:
    Aug 2012

    Posted 02 Aug 2011 Link to this post

    I am having a similar issue, I am using server-side .focus() method in the Page PreRender event which runs, but focus does not start on the RadEditor control.
  5. Rumen
    Admin
    Rumen avatar
    14462 posts

    Posted 04 Aug 2011 Link to this post

    Hi,

    You can try the solution provided in the following forum thread: how to set focus to radEditor body on click of tab of previous control?

    Best regards,
    Rumen
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  6. CaseNet
    CaseNet avatar
    3 posts
    Member since:
    Oct 2012

    Posted 24 Sep 2018 in reply to Rumen Link to this post

    Hello Rumen admin,

    I'm using your function to tab focus contentArea of editor.

    Press Tab -> It's work ok.

    Press Shift + Tab(move back other control): It always focus in last toolbar button.

    I see link: https://demos.telerik.com/aspnet-ajax/editor/examples/accessibleeditor/defaultcs.aspx

    --> Shift + Tab moves the focus from the edit area to the last toolbar button (standard MS Word shortcut).

    I need move other control when using Shift+Tab .

    Have you any idea to fix my case? 

    I'm using licence Telerik.

    Thanks for your support. 

     

     

     

  7. Rumen
    Admin
    Rumen avatar
    14462 posts

    Posted 25 Sep 2018 Link to this post

    Hi there,

    You can use the following code example for the DIV content area of RadEditor to make the Shift+Tab combination setting the focus on the element before RadEditor, but not the toolbar:


    Tab Index 1:
    <telerik:RadTextBox runat="server" ID="RadTextBoxInput" TabIndex="1"></telerik:RadTextBox>
    <br />
    <br />
    Tab Index 2:
    <telerik:RadEditor ID="RadEditor1" Skin="Default" OnClientLoad="OnClientLoad" ContentAreaMode="Div" runat="server">
    </telerik:RadEditor>
    <br />
    Tab Index 2:
    <telerik:RadTextBox runat="server" ID="RadTextBox2" TabIndex="3"></telerik:RadTextBox>
       
    <script type="text/javascript">
        function OnClientLoad(editor, args) {
            editor.get_contentArea().tabIndex = "2"; //set tabIndex to the content area
       
            editor.removeShortCut("InsertTab");
            editor.removeShortCut("InsertShiftTab");
            var buttonsHolder = $get(editor.get_id() + "Top"); //get a reference to the top toolbar zone of the editor
            var buttons = buttonsHolder.getElementsByTagName("A"); //get a reference to all A elements on the toolbar and disable the tabbing through them
            for (var i = 0; i < buttons.length; i++) {
                var a = buttons[i];
                a.tabIndex = -1;
                a.tabStop = false;
            }
        }
    </script>


    Regards,
    Rumen
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top