Search code examples
javascriptjqueryasp.netfocusradeditor

Detecting when an element is about to get focus


I have an ASP.NET page with a Telerik RadEditor (rich text box). When tabbing through a page, when a user gets to the text box, focus gets set to the various toolbar icons before it goes to the textarea. I added some jQuery to one page to set the focus on the text area when tabbing out of the last cell on a form:

$('input[type=text][id*=tbCost]').keydown(function (e) {
    var keyCode = e.keyCode || e.which;
    if (keyCode == 9) {    //If TAB key was pressed
        e.preventDefault();
        var editor = $('body').find("<%=RadEditor1.ClientID%>");    //get a reference to RadEditor client object
        editor.setFocus();    //set the focus on the the editor
    }
});

I am looking for a way to implement this functionality in the control so that it will work regardless of the page it is on. For example, in the above code, focus is only set if the user is tabbing out of the tbCost cell. I would like to be able to set the focus to the text area when a user tabs into the toolbar items.

Is there any way to detect when an element is about to get focus? I know I can see if an element has focus, but I can't think of a way to implement this functionality.

Thanks

Solution:

If anybody has this same question in the future and wants an example, here is the code I used:

 $(document).ready(function () {
    $('.reToolCell').focusin(function () {
        var editor = $('body').find("<%=RadEditor1.ClientID%>");
        editor.setFocus();
    });
});

Solution

  • You might consider binding to a focus on the toolbar icons and redirecting focus to the text area. Although this might have unintended side effects if users are trying to tab-focus these tools in order to use them.