tab focus in editor

[John]

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?

[Daniel]

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

[John]

$(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?

[Daniel]

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

[John]

this worked like a charm. thanks :)

[Uwe]

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>

[Ivan Danchev]

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