tab focus in editor

7 posts, 1 answers
  1. John
    John  avatar
    8 posts
    Member since:
    Apr 2013

    Posted 04 Jun 2013 Link to this post

    When tabbing to the editor from another input field, the focus first goes to the buttons (bold, italic, etc) instead of giving focus to the actual editable area.

    Is there a workaround to this?
  2. Daniel
    Admin
    Daniel avatar
    2179 posts

    Posted 06 Jun 2013 Link to this post

    Hello John,

    You could set the tabindex attribute to -1 for the buttons so that they are excluded from the tabbing order.

    Regards,
    Daniel
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. John
    John  avatar
    8 posts
    Member since:
    Apr 2013

    Posted 06 Jun 2013 Link to this post

    $(function () {
         $('li.k-editor-button').attr('tabindex', -1);
    });

    setting the tabindex for the class k-editor-button does not exclude it from the tab order even though I see the attribute has been added in html to the editor. Is there something overriding the tab index?
  4. Answer
    Daniel
    Admin
    Daniel avatar
    2179 posts

    Posted 10 Jun 2013 Link to this post

    Hello John,

    The li elements will not get focused by default. You should set the tabindex to the anchors, spans and inputs. Check this jsBin example.

    Regards,
    Daniel
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. John
    John  avatar
    8 posts
    Member since:
    Apr 2013

    Posted 10 Jun 2013 Link to this post

    this worked like a charm. thanks :)
  6. Uwe
    Uwe avatar
    11 posts
    Member since:
    Mar 2008

    Posted 12 Dec 2017 Link to this post

    Using the "MVC version", the above JS Bin example did not work for me. My solution:

    @* HTML editor. *@
    @(Html.Kendo().EditorFor(m => m.AdditionalRemarks)
                    .HtmlAttributes(new { style = @"width: 100%; height:350px" })
                    .Encode(false)
                    .Resizable(resizable =>
                        resizable.Content(true)
                            .Toolbar(true))
                    .Tools(tools =>
                        tools.Clear()
                            .Bold()
                            .Italic()
                            .InsertOrderedList()
                            .InsertUnorderedList()
                            .Outdent()
                            .Indent()
                            .CreateLink()))
     
    <script>
        @* Disable tabbing through editor toolbar buttons. *@
        function adjustToolBarButtons() {
            $('.k-editor-toolbar').each(function () {
                $(this).find('*').attr("tabindex", -1);
            });
        }
     
        @* Place this after the editor definition. *@
        $(function () {
            adjustToolBarButtons();
        });
    </script>
  7. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1345 posts

    Posted 13 Dec 2017 Link to this post

    Hello,

    Setting the tabindex attribute of the elements in the Editor's toolbar on document.ready, as Uwe demonstrated, is the correct approach when using the Editor's MVC wrapper.

    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top